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!

Thanks for the responses! Unfortunately this piece of CSS just doesn't play nicely with Firefox so I've started the process of converting them to proper buttons. — David, Feb 04 '16 at 03:08

score 5 · Answer 1 · answered Feb 03 '16 at 22:37

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>

Completely hiding radio button elements will prevent labels catch focus which is crucial for navigation using keyboard. — Andrej, May 16 '18 at 22:54

dennieru · Answer 2 · 2016-02-03T22:15:48.547

1

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

edited Feb 03 '16 at 22:15

answered Feb 03 '16 at 22:10

dennieru

21
3

that turned the radio button into ellipses, but no other CSS elements were applied in FireFox. – David Feb 03 '16 at 22:16
The most approximately shape with moz is: -moz-appearance:tab; – dennieru Feb 05 '16 at 12:51

score 0 · Answer 3 · answered Feb 03 '16 at 22:48

Unfortunately radio inputs along with select lists, file uploads and checkboxes don't allow full control through CSS. It seems to be browser dependent on what styles you can change.

If you are just looking at changing the input style overall I've done something like this before. Just hide the input and wrap it in a label. Then add some sibling element to work with and style that however you want.

#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/

Radio button styles are not applied in Firefox

3 Answers3