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

-2 votes204 views1 answer
How to add a button in html and css
CSS
0 vote231 views1 answer
Css 4 3 ratio
CSS
0 vote213 views1 answer
Css apply style to direct children
CSS
2 votes195 views1 answer
Ho to choose the first child of parent in css
CSS
16 votes284 views2 answers
Css hiddden
CSS
1 vote357 views1 answer
Overflow scrollbar with variable height
CSS
0 vote269 views3 answers
Add custom css to wordpress menu item
CSS
0 vote213 views1 answer
Vertical divider between my flexbox
CSS
1 vote212 views1 answer
Animated background css
CSS
0 vote203 views1 answer
Slect all li that not have ul
CSS