Radio button styles are not applied in Firefox
<p>I found an SO article that demonstrated how to change radio buttons into clickable buttons <a href="https://stackoverflow.com/a/24286903/5066482">here</a>, 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.</p>

<p><a href="https://jsfiddle.net/eqyms7vc/2/" rel="nofollow noreferrer">https://jsfiddle.net/eqyms7vc/2/</a></p>

<p>HTML</p>

<pre><code>  &lt;div id="service_type"&gt;
    &lt;input type="radio" name="service_type" id="service_type_1" value="Option 1"&gt;
    &lt;input type="radio" name="service_type" id="service_type_2" value="Option 2"&gt; 
  &lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>#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;
}
</code></pre>

<p>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?</p>

<p>Thanks!</p>