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

Question

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

根据我的研究，广泛推荐使用 -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来切换它)，然后使用相邻同级选择器设置与: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

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

风格化复选框

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