change button color on radio button selection code example
Example 1: how to change color of a radio button
input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #ffa500;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
Example 2: change div background color when radio button selected
div.entry {
position: relative;
padding: 8px;
width: 50%;
}
div.entry div.highlight {
background-color: #fff;
position: absolute;
z-index: -1;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
div.entry input:checked ~ div.highlight {
background-color: orange;
}
<div class="entry">
<input type="radio" name="list" />This is one option
<div class="highlight"></div>
</div>
<div class="entry">
<input type="radio" name="list" />This is another option
<div class="highlight"></div>
</div>
<div class="entry">
<input type="radio" name="list" />This is a third option
<div class="highlight"></div>
</div>