Question

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

从我的研究中，广泛推荐使用-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输入相邻的:checked的样式：

喜欢这样：

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输入单选按钮样式和默认设置

2 个答案: