I mean, a radio button itself consists of a round shape and a dot at the center (when the button is selected). What I want to change is the color of both. Can this be done using CSS?
A quick fix would be to overlay the radio button input style using :after
, however it's probably a better practice to create your own custom toolkit.
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;
}
<input type='radio' name="gender"/>
<input type='radio' name="gender"/>