Firefox not loading css for radio buttons

Question

so i have this html code for radio buttons which works perfect on chrome but the css for radio buttons on firefox isnt working. What could be the problem?that is the code i have,is there anything im missing?

input[type='radio'] {
 
    border-radius:50%;
    outline:none;
}

input[type='radio']:before {
    content:'';
    display:block;
    width:50%;
    height:50%;
    margin: 25% auto;    
    border-radius:50%;    
}
input[type='radio']:checked:before {
    background-color: #0496fd;
}

.bob-bound
{   
    padding-bottom:0.2px;
 padding-right:10px;
 margin:auto;
 border: solid 0px blue;
 height: 110px;
 position:relative;
 background-color: #f5f5f5;
}

.bob-bound-type-lable{
 position: absolute;
 margin-top:20px;
 margin-left:30px;
 border: solid 0px red;
 width: 239px;
    height: 18px;
    font-family: HelveticaNeue-Light, Arial;
    font-size: 16px;
    color: #000000;
}

.bob-button {
    width: 250px;
    height: 46px;
    vertical-align:right;
    background-color: #ffffff ;
    border: solid 1px #bfbfbf;
    padding-left:5px;
    font-family: ArialMT, Arial, sans-serif;
    font-size: 15px;
    margin-left:12px;
    cursor:pointer;
}
.bob-button:hover {
 background-color: #f3f8fd;
}


.bob-recommendation-button
{   
    position:absolute;
 right:0px;
 width: 292px;
 top:49px; 
 border: solid 0px red;
}

.bob-Inbound{
    position:absolute;
    top:6px;
    margin-left:8px;
    width: 112px;
    height: 17px;
    font-family: ArialMT, Arial, sans-serif;
    font-weight:bold;
    font-size: 16px;
    border: solid 0px red;
}

.bob-Outbound {
 position:absolute;
 top:6px;
 margin-left:12px;
    width: 239px;
    height: 17px;
    font-family: ArialMT, Arial, sans-serif;
    font-weight:bold;
    font-size: 16px;
    border: solid 0px red;
    margin-bottom:20px;
}
.bob-bound-type{
 position: absolute;
 width:437px;
 margin-top:56px;
 font-size: 14px;
 margin-left:27px;
 border: solid 0px red;
}
.bob-radio{
    background:green;
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    border: solid 1px #bbbbbb;
}

.bob-second-radio{
 margin-left:120px;
}

<div class="bob-bound">
    <div class="bob-bound-type-lable">
        Contact Type
    </div>

    <div class="bob-bound-type">
        <input type="radio" name="radiogroup" id="Inbound" class="bob-radio" value="Inbound" checked="checked"/>
        <label for="Inbound" class="bob-Inbound">Inbound</label>
        <input type="radio" name="radiogroup" id="Outbound" class="bob-radio bob-second-radio" value="Outbound"/>
        <label for="Outbound" class="bob-Outbound">Outbound</label>
    </div>
</div>

this is the way its supposed to display:

input element doesn't support pseudo-elements : http://stackoverflow.com/questions/3538506/which-elements-support-the-before-and-after-pseudo-elements — twxia, May 27 '16 at 07:53

score 1 · Accepted Answer · edited May 23 '17 at 11:52

1

The general consensus is that styling radio buttons in Firefox with CSS is a fool's errand. But there are several workarounds that achieve the same effect. My personal favorite is to hide the actual radio button and instead use images to show if it is checked or unchecked.

There's a nice working example here:

Mozilla Firefox input radio button styling and default settings

edited May 23 '17 at 11:52

Community

1
1

answered May 27 '16 at 07:51

az0

38
6

Thank you so much for the link, the solution works perfect @az0 – fulufhelo mudau May 27 '16 at 08:40

score 1 · Answer 2 · answered May 27 '16 at 07:54

1

Styling input elements (in particular radio buttons and checkboxes) can be unreliable across navigators. You're better off applying the styling to the label or a pseudo element.

answered May 27 '16 at 07:54

Maëlig

409
1
4
10

Firefox not loading css for radio buttons

2 Answers2

Linked