我怎样才能像 Chrome 中那样更改单选按钮的外观

Question

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

Fiddle: 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

我建议你使用 iCheck 它易于使用。

Answer 2

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