单选按钮样式不适用于 Firefox

Question

我发现了一篇 SO 文章，该文章演示了如何将单选按钮更改为可点击按钮 here，这在 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 浏览器显示单选按钮标签？

谢谢！

Answer 1

很遗憾，单选输入以及选择列表、文件上传和复选框不允许通过 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/

Answer 2

您可以只隐藏单选按钮，并使用 label:before 伪元素来设置替代单选按钮的样式。此示例仅适用于 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>

Answer 3

试试这个：

-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;}