Mozilla Firefox 输入单选按钮样式和默认设置

Question

我的页面上有各种 form 元素，但我在 Firefox 中遇到了输入单选按钮的问题。单选按钮在 Safari 和 Chrome 中显示完美，但在 Firefox 中完全不同（圆形而不是方形！）并且默认为 :checked，这也是一个问题。

根据我的研究，广泛推荐使用 -moz-appearance，但在这种情况下，我找不到与我的查询直接相关的任何答案。任何帮助将不胜感激。

标记

<form>
    <label class="radio" for="#">One</label>
    <input type="radio">
    <label class="radio" for="#">Two</label>
    <input type="radio">
</form>

CSS

input[type="radio"] {
    -webkit-appearance: none; /* Remove default appearance styling for Webkit */
    -moz-appearance: none; /* Remove default appearance styling for Firefox */
    background: #ccc;
    width: 45px;
    height: 45px;
    vertical-align: middle;
    margin: 0 10px;
    cursor: pointer;
}

input[type="radio"]:hover { background: #e4e4e4; }

input[type="radio"]:checked {
    background: #000;
    position: relative;
    width: 45px;
    height: 45px;
}

input[type="radio"]:checked:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 8px;
    background: transparent;
    top: 15px;
    left: 10px;
    border: 1px solid #fff;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

JSFiddle

请在 Firefox 和 Chrome 中查看上述 fiddle 以了解我所指的问题。谢谢

Answer 1

我不建议将单选按钮的样式设置为看起来像复选框，但既然你问了，我建议你换一种方式...

将 label 放在 input 之后，隐藏 input（我们将仅使用 label 来切换它），然后使用 Adjacent Sibling Selector 设置与 :checked 输入相邻的 label 的样式：

像这样：

input[type="radio"] {
    /* hide the real radio button - but not with display:none as it causes x-browser problems */
    opacity:0.2;
    position:absolute;
    /*left:-10000;*/
}
input[type="radio"] + label {
    cursor: pointer;
}
/* N.B You could use a child span in the label if you didn't want to use the :after pseudo */
input[type="radio"] + label:after {
    display:inline-block;
    content:"✓";
    font-size:30px;
    line-height:45px;
    text-align:center;
    color:#ccc;
    background: #ccc;
    width: 45px;
    height: 45px;
    vertical-align: middle;
    margin: 0 10px;
    border-radius:50%;  
    border:1px solid grey;
}
input[type="radio"] + label:hover:after {
    background: #aaa;    
}
input[type="radio"]:checked + label:after {
    color:#fff;
    background: #555; 
    box-shadow:0 0 8px deepSkyBlue;
    border-color:white;
}

<form>        
    <input id="a" name="myradio" type="radio" />
    <label for="a">One</label>
    <input id="b" name="myradio" type="radio" />
    <label for="b">Two</label>
</form>

Answer 2

您可能想看看我为此目的开发的这个简单的库。底层元素被隐藏，更容易设置样式的元素取而代之。

Stylized Checkbox

基本用法非常简单——只需调用stylizedRadioButtons('myradio');。

Mozilla Firefox 输入单选按钮样式和默认设置

Mozilla Firefox input radio button styling and default settings

css

forms

firefox

cross-browser