Radio button styles are not applied in Firefox

Question

I found an SO article that demonstrated how to change radio buttons into clickable buttons here, which worked liked a charm in Chrome and Safari. However, Firefox doesn't render the CSS properly. The article mentions that the solution won't work in IE, just not sure if that means it won't work in Firefox also.

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

If there is not a way to get Firefox to render the above CSS properly, is it possible to display the radio button labels only to Firefox browsers?

Thanks!

Answer 1

You can just hide the radiobutton, and use the label:before pseudo-element to style an alternative radiobutton. This example is css only, but you can also use a background image if wanted.

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 2

Try with this:

-moz-appearance:none;

in:

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