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

时间:2014-12-05 09:05:20

标签: html css css3 radio-button mozilla

我制作了一个单选按钮控件,可以在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

1 个答案:

答案 0 :(得分:0)

尝试

-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