How to change radio button color

Change radio button color

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

Source: stackoverflow.com

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

Source: stackoverflow.com

How to change radio button color

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.

Source: stackoverflow.com

Similar codes

17 votes194 views1 answer
Have you used flexbox & css grid before? what are the differences between them? interview
CSS
14 votes254 views6 answers
Bootstrap image size
CSS Bootstrap
0 vote242 views1 answer
Switch css with text
CSS
0 vote233 views1 answer
Putting an object in front of a page javascript
CSS
0 vote247 views1 answer
Css change the accordion arrow color
CSS
6 votes245 views3 answers
Css scroll snap
CSS
3 votes240 views1 answer
Hcss change highlight color
CSS
0 vote276 views1 answer
Bootstrap create full screen background image
CSS Bootstrap
134 votes233 views6 answers
Remove background from image
CSS
3 votes218 views2 answers
Bootstrap 5 pagination
CSS