Radio button custom style is not getting applied on Firefox

Question

I am having a problem with radio button custom style. I don't want to use the user agent default style. I modified the style and it is working on Chrome browser very well but in Firefox this style is not applying.

HTML Markup

<div class="_lc_radio_button">
<div class="_radio_holder">
    <input value="look_indiv_plan" name="radioButtons" type="radio" id="radioButtons_1" class="input_radio" checked="checked">
</div>
<div class="_radio_label_holder">
    <label for="radioButtons_1">Looking for an Individual or Family Plan</label>
</div>
</div>

This is my CSS:

._lc_radio_button{
 background: blue;
 color: white;
 }
 .input_radio{
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 20px;
    width: 20px;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: none;
    outline: none;

    &:after {
        content: "";
        height: 12px;
        width: 12px;
        border-radius: 50%;
        position: relative;
        background-color: white;
        left: 2px;
        top: 2px;
    display: inline-block;
      }
}

I am seeing behaviour is different in both browsers. I have added extra style attribute for firefox.

This is the working fiddle. If you will open same fiddle in different chrome and firefox browser look is different. I am expecting the look which is showing in chrome but in firefox it is not applying.

https://jsfiddle.net/rrLptw07/

![firefox error][1]

You can't use pseudo element on single tag elements like input, img, etc. Chrome do apply it though, but the rest doesn't — Asons, Sep 19 '16 at 22:46
What you can do, is adding a span or div immediately after the input (make input `display: none`) and style it using a pseudo when the input is checked — Asons, Sep 19 '16 at 22:49
Here is a sample: http://stackoverflow.com/questions/25590269/styling-radio-button — Asons, Sep 19 '16 at 22:56
@LGSon : Can you please give me example? I got your point. Will you able to update in JSFiddle? — Henry, Sep 19 '16 at 22:56
Check the sample link I posted, it shows very clearly how to do — Asons, Sep 19 '16 at 23:06

Radio button custom style is not getting applied on Firefox

0 Answers0