如何更改无线电按钮的外观，就像它在Chrome中看起来一样

Question

我在HTML for Firefox中为单选按钮设置样式时遇到了问题。在Webkit / Blink中它工作正常。我需要使用什么样式选项才能在Firefox中看起来不错？如果可能，我不会使用JavaScript。

小提琴：https://jsfiddle.net/oh5uyevh/

对于精美渲染，请使用Chrome / Safari / Edge。对于不那么好的渲染使用Firefox

代码：

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

Answer 1

尝试在您的CSS中使用[input type="radio"]规则，或者您可以使用this online generator

Answer 2

我建议您使用iCheck之类的内容 它易于使用。