box-shadow 样式不适用于 Mozilla 中的单选按钮

Question

我制作了一个单选按钮控件，它在 Chrome 中完美运行，但在 Mozilla 中却无法运行。

HTML：

<input type='radio' class="myRadio" name='a' checked/><span> A</span>
<br>
<input type='radio'  class="myRadio" name='a'/><span> B</span>
<br>
<input type='radio'  class="myRadio" name='a'/> <span> C</span>

CSS：

input[type='radio'].myRadio {
    -webkit-appearance:none;
    width:20px;
    height:20px;
    border:1px solid darkgray;
    border-radius:50%;
    outline:none;
    padding:0px;
    -moz-box-shadow:0 0 5px 0px gray inset;
    box-shadow:0 0 5px 0px gray inset;
}
input[type='radio'].myRadio:hover {
    box-shadow:0 0 5px 0px orange inset;
     -moz-box-shadow:0 0 5px 0px orange inset;
}
input[type='radio'].myRadio:before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    margin: 20% auto;    
    border-radius:50%;
    margin-top:0px;

}
input[type='radio'].myRadio:checked:before {
    background:orange;
}

Here is the jsfiddle

Answer 1

试试

-moz-appearance: none;

显然您需要关闭默认外观设置才能使box-shadow（不需要前缀）工作。

如果您检查用户代理样式规则（打开选项（齿轮）面板中“检查器”下的“显示浏览器样式”），您会看到

border: 2px inset #F0F0F0 !important;

这里的!important 迫使这种风格优先于你的风格，我想是为了强制单选按钮的“本机”外观。你可能会在这张旧票中找到一些线索：https://bugzilla.mozilla.org/show_bug.cgi?id=605985。