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 中查看上述小提琴以查看我所指的问题。谢谢。

Answer 1

我不建议将单选按钮设置为看起来像复选框，但既然您问我是否建议您以不同的方式处理它...

将label 定位在input 之后，隐藏input（我们将只使用label 来切换它），然后使用Adjacent Sibling Selector 设置label 与@ 相邻的样式987654327@输入：

像这样：

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');即可。