html - 单选按钮在 chrome 中是圆形的，但在 firefox 中是方形的

Question

如标题所述，CSS 和 HTML 中的一切都是相同的，但出于某种原因，firefox 将单选按钮显示为正方形。

如果你打开http://jsfiddle.net/u2yq3j50/4/在 Chrome 中，单选按钮显示为圆圈。如果您在 Firefox 中打开它，它会显示为正方形。

我已经在 #radio-demo input[type="radio"] + label:before 中尝试了 -moz-appearance: radio; 但这并没有给出所需的输出，因为它只是覆盖了我的样式并使其不可选择。

任何提示都会很棒，谢谢!

Answer 1

基础第一:

-webkit-border-radius: 10px;
border-radius: 10px;

检查一下:

jsFiddle

有时我太在意浏览器的兼容性，以至于我忘记了所有关于无前缀版本的事情。 Here's an "ok" website它生成基本的 css3 代码，然后您可以为其他浏览器添加前缀