Mozilla Firefox input radio button styling and default settings

Question

I have various form elements on my page, but am having an issue with input radio buttons in Firefox. The radio buttons display perfectly in Safari and Chrome, but are entirely different in Firefox (circular instead of square!) and are :checked by default, which is also an issue.

From my research, the use of -moz-appearance is widely recommended, but in this instance I can't find any answers that directly relate to my query. Any help would be greatly appreciated.

Markup

<form>
    <label class="radio" for="#">One</label>
    <input type="radio">
    <label class="radio" for="#">Two</label>
    <input type="radio">
</form>

CSS

input[type="radio"] {
    -webkit-appearance: none; /* Remove default appearance styling for Webkit */
    -moz-appearance: none; /* Remove default appearance styling for Firefox */
    background: #ccc;
    width: 45px;
    height: 45px;
    vertical-align: middle;
    margin: 0 10px;
    cursor: pointer;
}

input[type="radio"]:hover { background: #e4e4e4; }

input[type="radio"]:checked {
    background: #000;
    position: relative;
    width: 45px;
    height: 45px;
}

input[type="radio"]:checked:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 8px;
    background: transparent;
    top: 15px;
    left: 10px;
    border: 1px solid #fff;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

JSFiddle

Please view the above fiddle in Firefox and Chrome to see the issues I am referring to. Thanks.

Answer 1

I wouldn't advise styling radio buttons to look like checkboxes but since you ask might I suggest that you approach it a different way...

Position the label after the input, hide the input (we'll use just the label to toggle it), then use the Adjacent Sibling Selector to style the label adjacent to the :checked input:

Like this:

input[type="radio"] {
    /* hide the real radio button - but not with display:none as it causes x-browser problems */
    opacity:0.2;
    position:absolute;
    /*left:-10000;*/
}
input[type="radio"] + label {
    cursor: pointer;
}
/* N.B You could use a child span in the label if you didn't want to use the :after pseudo */
input[type="radio"] + label:after {
    display:inline-block;
    content:"✓";
    font-size:30px;
    line-height:45px;
    text-align:center;
    color:#ccc;
    background: #ccc;
    width: 45px;
    height: 45px;
    vertical-align: middle;
    margin: 0 10px;
    border-radius:50%;  
    border:1px solid grey;
}
input[type="radio"] + label:hover:after {
    background: #aaa;    
}
input[type="radio"]:checked + label:after {
    color:#fff;
    background: #555; 
    box-shadow:0 0 8px deepSkyBlue;
    border-color:white;
}

<form>        
    <input id="a" name="myradio" type="radio" />
    <label for="a">One</label>
    <input id="b" name="myradio" type="radio" />
    <label for="b">Two</label>
</form>

Answer 2

You may want to check out this simple library I'm developing for just this purpose. The underlying elements are hidden and more easily stylable elements take their place.

Stylized Checkbox

The basic usage is very simple - just call stylizedRadioButtons('myradio');.