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（无需前缀）工作。

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

border: 2px inset #F0F0F0 !important;

这里的!important迫使这种风格优先于你的风格，我想这是为了强制执行＆＃34; native＆＃34;单选按钮的外观。你可以在这张旧票中找到一些线索：https://bugzilla.mozilla.org/show_bug.cgi?id=605985。

box-shadow样式未应用于Mozilla中的单选按钮

1 个答案: