CODEWITHSUNDEEP
htmlcssmaterialize
Code Guy
Code Guy

Reputation: 3198

Changing radio color material design

I need to change the material css radio button color (with gap type to orange)

<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

      <!-- Compiled and minified JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

.with-gap[type="radio"].filled-in:checked + label:after{
     border: 2px solid #ff9800;
     background-color: #ff9800;
}  

<p>
  <input class="with-gap" name="group1" type="radio" id="test3"  />
  <label for="test3">Green</label>
</p>

Upvotes: 4

Views: 6331

Answers (7)

A14Narriaga
A14Narriaga

Reputation: 1

HTML

<label>
 <input class="with-gap radio-blue" name="group1" type="radio" checked />
 <span>Test</span>
</label>

SASS

.radio-blue.with-gap:checked+span:not(.lever):after
 border: 2px solid #536dfe
 background-color: #536dfe

.radio-blue.with-gap:checked+span:not(.lever):before
 border: 2px solid #536dfe

Upvotes: 0

S. Tarrant
S. Tarrant

Reputation: 26

I know this is an old question but I recently ran into a similar issue with Materialize radio button coloring. I was creating a survey form with pass, fail, not checked and not applicable inputs and needed the four radio buttons to be different colors. I added an extra class to each span and targeted this class from the CSS to override Materialize's standard styling. I was happy with the pass selector being the standard materialize green.

HTML:

<label>
    <input type="radio" id="answer_1"  name="answer_1" value="Pass"/>
    <span class="span-pass">Pass</span>
</label>
<label>
    <input type="radio" id="answer_1" name="answer_1" value="Fail"/>
    <span class="span-fail">Fail</span>
</label>
<label>
    <input type="radio" id="answer_1" name="answer_1" value="NC"/>
    <span  class="span-nc">Not Checked</span>
</label>
<label>
    <input type="radio" id="answer_1" name="answer_1" value="NA"/>
    <span class="span-na">Not Applicable</span>
</label>

CSS:

[type="radio"]:checked+span.span-fail:after, [type="radio"].with-gap:checked+span.span-fail:after {
    background-color: red;
    border: 2px solid red;
}

[type="radio"]:checked+span.span-nc:after, [type="radio"].with-gap:checked+span.span-nc:after {
    background-color: orange;
    border: 2px solid orange;
}

[type="radio"]:checked+span.span-na:after, [type="radio"].with-gap:checked+span.span-na:after {
    background-color: #555;
    border: 2px solid #555;
}

Hope this is of some help to someone out there.

Upvotes: 1

HelloGello
HelloGello

Reputation: 361

red color

  [type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after {
  background-color:rgb(255, 0, 0);
}
[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, 
[type="radio"].with-gap:checked+span:after {
  border: 2px solid rgb(255, 0, 0);
}

Upvotes: 0

Nikul Khatik
Nikul Khatik

Reputation: 102

try this i hope it will work

[type="radio"]:checked + label::after, [type="radio"].with-gap:checked + label::after {
    background-color: rgb(255, 138, 6) !important;
}
[type="radio"]:checked + label::after, [type="radio"].with-gap:checked + label::before, [type="radio"].with-gap:checked + label::after {
    border: 2px solid rgb(255, 138, 6) !important;
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

      <!-- Compiled and minified JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<style>

</style>
<p>
  <input class="with-gap" name="group1" type="radio" id="test3"  />
  <label for="test3">Green</label>
</p>
</body>
</html>

Upvotes: 1

santhosh
santhosh

Reputation: 476

Try with the below CSS

input[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:after{
 background-color: #ff9800;
}

input[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:before, [type="radio"].with-gap:checked+label:after {
border: 2px solid #ff9800;
}

Upvotes: 0

user4779637
user4779637

Reputation:

put this [type="radio"].with-gap:checked+label:after { background-color: orange !important; }

and here is example

Upvotes: 3

Akash Shrivastava
Akash Shrivastava

Reputation: 1365

Use below style for inner-dot of radio button:

.with-gap[type="radio"]:checked+label:after{
   background-color: #ff9800;
   border-color: #ff9800;
}

Use below style for the outer-border of radio button:

.with-gap[type="radio"]:checked+label:before{
  border-color: #ff9800;
}

Hope it helps.

Upvotes: 0

Related Questions