我找到了一篇SO文章,演示了如何将单选按钮更改为可点击的按钮,这在Chrome和Safari中就像一个魅力。但是,Firefox 无法正确呈现 CSS。文章提到该解决方案在IE中不起作用,只是不确定这是否意味着它在Firefox中也不起作用。
https://jsfiddle.net/eqyms7vc/2/
.HTML
<div id="service_type">
<input type="radio" name="service_type" id="service_type_1" value="Option 1">
<input type="radio" name="service_type" id="service_type_2" value="Option 2">
</div>
.CSS
#service_type .container {
margin: 10px;
}
#service_type label {
padding: 6px 12px;
color: #fff;
}
#service_type input {
-webkit-appearance:none;
height:50px;
width:150px;
padding:10px;
color:white;
margin:5px;
font-size: 18px;
text-align: center;
}
#service_type input:hover {
font-weight: bold;
}
#service_type input#service_type_1 {
background:#336600;
}
#service_type input#service_type_2 {
background:#0066ff;
}
#service_type input#service_type_1:before, input#service_type_1::before {
content:"Option 1";
}
#service_type input:before, input::before {
line-height:30px;
width:100%;
text-align:center;
}
#service_type input#service_type_2:before, input#service_type_2::before {
content:"Option 2";
}
#service_type .selected {
background-color: #000;
}
如果没有办法让 Firefox 正确渲染上述 CSS,是否可以只向 Firefox 浏览器显示单选按钮标签?
谢谢!
您可以隐藏单选按钮,并使用标签:在伪元素之前设置备用单选按钮的样式。此示例仅是 css,但如果需要,您也可以使用背景图像。
input[type=radio]{
display:none;
}
input[type=radio] + label:before{
content: '•';
display:inline-block;
border-radius: 10px;
width: 16px;
height:16px;
background:#8cf;
color:#8cf;
border: 2px solid #f00;
line-height: 15px;
text-align: center;
font-size:25px;
margin-right: 5px;
}
input[type=radio]:checked + label:before{
color: #fff;
}
<input type="radio" name="group" id="radio1" /><label for="radio1">radiobutton</label><br />
<input type="radio" name="group" id="radio2" /><label for="radio2">radiobutton</label><br />
<input type="radio" name="group" id="radio3" /><label for="radio3">radiobutton</label><br />
<input type="radio" name="group" id="radio4" /><label for="radio4">radiobutton</label>
试试这个:
-moz-appearance:none;
在:
#service_type input {
-webkit-appearance:none;
-moz-appearance:none;
height:50px;
width:150px;
padding:10px;
color:white;
margin:5px;
font-size: 18px;
text-align: center;}
不幸的是,无线电输入以及选择列表、文件上传和复选框不允许通过 CSS 进行完全控制。它似乎取决于浏览器取决于您可以更改的样式。
如果您只是想改变整体输入样式,我以前做过这样的事情。只需隐藏输入并将其包装在标签中即可。然后添加一些同级元素来使用和样式,无论您想要什么。
#fancyoptions input{
display:none;
}
#fancyoptions label span{
padding:10px;
margin:5px;
border:1px solid black;
background-color:#00ff00;
}
#fancyoptions input:checked + span{
background-color:#ff0000;
}
<div id="fancyoptions">
<br/>
<label>
<input type="radio" name="thing" value="Option 1">
<span>Option 1</span>
</label>
<label>
<input type="radio" name="thing" value="Option 2">
<span>Option 2</span>
</label>
</div>
https://jsfiddle.net/eqyms7vc/2/