I have a problem styling a radio button in HTML for Firefox. In Webkit/Blink it works fine. What do I need to use for styling options to look nice in Firefox? If possible I won't use JavaScript.
Fiddle: https://jsfiddle.net/oh5uyevh/
For nice rendering use Chrome/Safari/Edge. For not so nice rendering use Firefox
Code:
HTML
<input class="color color-red" type="radio" name="accent_color_chooser" value="red">
<input class="color color-blue" type="radio" name="accent_color_chooser" value="pink" checked>
CSS
input.color {
margin: 5px;
}
.color {
width: 20%;
margin: 5px;
height: 50px;
-webkit-appearance: initial;
-moz-appearance: none;
}
.color:checked {
border: 5px solid green;
}
.color-red {
background-color: red;
}
.color-blue {
background-color: blue;
}
Try to use in your CSS the [input type="radio"]
rule or maybe you can use this online generator