htmlcssgoogle-chromefirefox

How can I change the appearance of the radiobutton like it looks in Chrome

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

  • Try to use in your CSS the [input type="radio"] rule or maybe you can use this online generator