Mozilla Firefox输入单选按钮样式和默认设置 [英] Mozilla Firefox input radio button styling and default settings

问题描述

我在页面上有各种表单元素，但在Firefox中有输入单选按钮的问题。单选按钮在Safari和Chrome中显示完美，但在Firefox中是完全不同的（循环而不是正方形！），默认情况下为选中状态，这也是一个问题。

I have various form elements on my page, but am having an issue with input radio buttons in Firefox. The radio buttons display perfectly in Safari and Chrome, but are entirely different in Firefox (circular instead of square!) and are :checked by default, which is also an issue.

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

From my research, the use of -moz-appearance is widely recommended, but in this instance I can't find any answers that directly relate to my query. Any help would be greatly appreciated.

标记

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

Please view the above fiddle in Firefox and Chrome to see the issues I am referring to. Thanks.

推荐答案

我不建议样式单选按钮看起来像复选框，但是因为你问我可以建议你不同的方式...

I wouldn't advise styling radio buttons to look like checkboxes but since you ask might I suggest that you approach it a different way...

在输入之后放置标签 ，隐藏输入（我们将使用标签来切换它），然后使用< a href =https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors =nofollow>相邻同级选择器以设置标签：输入：

Position the label after the input, hide the input (we'll use just the label to toggle it), then use the Adjacent Sibling Selector to style the label adjacent to the :checked input:

像这样：

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>

这篇关于Mozilla Firefox输入单选按钮样式和默认设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！