Changing radio color material design

user_5549354 0
Viewed 5798

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>
materialize css html
7 Answers

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

and here is example

Admin1

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>

user_70365400

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.

user_174070830

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.

user_85288570

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;
}
user_47338670

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);
}
user_103063940

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
user_164009900
Related