Get default checkbox/radio background colors across browsers

user_385513 0
Viewed 21

https://jsfiddle.net/razdo3eq/

Chrome on Windows:
enter image description here
rgb(0,92,200) and rgb(0,117,255)

Firefox on Windows:
enter image description here
rgb(0,96,223) for both

Is there any way to get these colors dynamically, either per JavaScript or via CSS descriptions like -webkit-link or -moz-hyperlinkText?

forms colors css javascript
1 Answers

A radio button is a native element specific to each OS/browser. There is no way to change its color/style

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'] {
    -webkit-appearance:none;
    width:20px;
    height:20px;
    border:1px solid darkgray;
    border-radius:50%;
    outline:none;
}
input[type='radio']:before {
    content:'';
    display:block;
    width:60%;
    height:60%;
    margin: 20% auto;    
    border-radius:50%;    
}
input[type='radio']:checked:before {
    background:green;
}
<input type='radio' name='a' checked/>
<input type='radio' name='a'/>

user_60768630
Related