html - Custom CSS3 Checkbox doesn't work on Firefox or IE

Question

The Fiddle: http://jsfiddle.net/V98W8/

I have a custom checkbox which looks and works perfectly in Chrome, but somehow in Firefox or IE shows up completely broken.

I have tried adding custom prefixes and everything but it doesn't seem to solve the problem.

#milestone-table input[type="checkbox"] {
    -webkit-appearance: none;
      -moz-appearance: none;
    appearance: none;
    background-color: #fafafa;
    border: 1px solid lightgrey;
    border-radius: 26px;

    -webkit-box-shadow: inset 0 0 0 1px lightgrey;
    box-shadow: inset 0 0 0 1px lightgrey;
    cursor: pointer;
    height: 28px;
    position: relative;

    -webkit-transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
    -moz-transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
    -o-transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
    -ms-transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
    transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
    width: 54px;
    vertical-align: top;
    outline: none;
}

#milestone-table .controls input[type="checkbox"] {
    margin-top: 10px;
}

#add-milestone {
    position: relative;
    top: 7px;
    left: 90%;
}

#milestone-table {
    margin-top: -20px;
}

#milestone-table input[type="checkbox"]:after {
    background-color: white;
    border: 1px solid lightgrey;
    border-radius: 24px;

    -webkit-box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.025), 0 1px 4px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.025), 0 1px 4px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.1);
    content: '';
    display: block;
    height: 24px;
    left: 0;
    position: absolute;
    right: 26px;
    top: 0;

    -webkit-transition: border .25s .15s, left .25s .1s, right .15s .175s;
    -moz-transition: border .25s .15s, left .25s .1s, right .15s .175s;
    -o-transition: border .25s .15s, left .25s .1s, right .15s .175s;
    -ms-transition: border .25s .15s, left .25s .1s, right .15s .175s;
    transition: border .25s .15s, left .25s .1s, right .15s .175s;
}

#milestone-table input[type="checkbox"]:checked {
    border-color: #53d76a;

    -webkit-box-shadow: inset 0 0 0 13px #53d76a;
    box-shadow: inset 0 0 0 13px #53d76a;
    padding-left: 18px;

    -webkit-transition: border .25s, box-shadow .25s, padding .25s .15s;
    -moz-transition: border .25s, box-shadow .25s, padding .25s .15s;
    -o-transition: border .25s, box-shadow .25s, padding .25s .15s;
    -ms-transition: border .25s, box-shadow .25s, padding .25s .15s;
    transition: border .25s, box-shadow .25s, padding .25s .15s;
}

#milestone-table input[type="checkbox"]:checked:after {
    border-color: #53d76a;
    left: 26px;
    right: 0;

    -webkit-transition: border .25s, left .15s .25s, right .25s .175s;
    -moz-transition: border .25s, left .15s .25s, right .25s .175s;
    -o-transition: border .25s, left .15s .25s, right .25s .175s;
    -ms-transition: border .25s, left .15s .25s, right .25s .175s;
    transition: border .25s, left .15s .25s, right .25s .175s;
}

Answer 1

Sadly, this is an old bug in Firefox that as far as I know hasn't been fixed. If they haven't changed this very recently (which, judging from your problem, they haven't), styling checkboxes and radio buttons simply doesn't work properly in Firefox no matter what you do.

Generally, a common way to work around this is by simply using regular divs and letting them toggle hidden fields through javascript or similar. Absolutely not a pretty solution, but until they fix this bug, there's not much you can do.

I made a quick example that uses a hidden checkbox and a label achieve something that works at least. Of course, it isn't as pretty as merely using a regular input tag, but it should work in Firefox (and I guess IE, but I haven't tested).

<div id="milestone-table">
    <p>Checkbox</p>
    <label>
        <input type="checkbox"/>
        <label class="checkbox"/>
    </label>
</div>