xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS code to change radio button color */
/* Unselected radio button */
input[type="radio"]:not(:checked) + label:before {
border-color: blue; /* Change color to desired value */
}
/* Selected radio button */
input[type="radio"]:checked + label:before {
border-color: red; /* Change color to desired value */
background-color: yellow; /* Change color to desired value */
}
</style>
</head>
<body>
<!-- HTML code with radio button -->
<input type="radio" id="radio1" name="radio" />
<label for="radio1">Option 1</label>
<input type="radio" id="radio2" name="radio" />
<label for="radio2">Option 2</label>
</body>
</html>
xxxxxxxxxx
input[type='radio'] {
-webkit-appearance:none;
width:20px;
height:20px;
border:1px solid darkgray;
border-radius:50%;
outline:none;
box-shadow:0 0 5px 0px gray inset;
}
input[type='radio']:hover {
box-shadow:0 0 5px 0px orange inset;
}
input[type='radio']:before {
content:'';
display:block;
width:60%;
height:60%;
margin: 20% auto;
border-radius:50%;
}
input[type='radio']:checked:before {
background:green;
}
xxxxxxxxxx
<style>
input[type="radio"] {
accent-color: #57a;
width: 20px;
}
</style>
xxxxxxxxxx
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;
}
xxxxxxxxxx
Using CSS you can use filter: grayscale(1); for dark grey, or use filter: hue-rotate() for other colors, in case you don't want to create a custom element.
xxxxxxxxxx
Add this attribute to your radio input selector
input[type="radio"]{
accent-color:green;
}