CSS - difficulty with custom check boxes between IE and Firefox

Question

I have written some code to help "skin" checkboxes and radio buttons using only CSS. It works very, very well ...

.... in Chrome.

However in FireFox and IE, it just ...fails outright. And I have absolutely no earthly idea why. The basic gist of it is that it loads a block using :before before the content and then places it over the default element. Of course it will be replaced with a sprite, but I have to get the outlaying behavior to function first. The code works like this; The way it is laid out in HTML is because I am using Bootstrap, and I am just adhering to the way it lays form fields out. I also have a Fiddle to demonstrate the problem.

Samples

jsBin

Includes the original LESS content.

jsFiddle

Only compiled CSS

HTML

<div class="checkbox">
    <label>
        <input type="checkbox" value="">
        <span style="font-size: 24px;">Option</span>
    </label>
</div>

LESS/CSS

.checkbox, .radio {
    position: relative;

    & + .checkbox {
        margin-top: 10px;

        &.pull-left {
            left: 6px;
        }
    }

    & + .radio {
        margin-top: 10px;
        left: 20px;
    }

    input[type="checkbox"] {
        &:active, &:hover, &:focus {
            &:before,
            &::before {
                background: yellow;
            }
        }

            &:checked,
            &:active:checked,
            &:hover:checked,
            &:focus:checked {
                &:before, &::before {
                    background: green;
                }
            }
    }

    input[type="radio"] {
        &:active:before,
        &:hover:before,
        &:focus:before {
            background: yellow;
        }

        &:checked:before,
        &:active:checked:before,
        &:hover:checked:before,
        &:focus:checked:before {
            background: green;
        }
    }


    input[type="radio"] {
        &:before, &::before {
            opacity: 1;
            position: absolute;
            content: "";
            display: block;
            background: black;
            height: 24px;
            width: 24px;
            top: 2px;
        }
    }

    input[type="checkbox"] {
        &:before, &::before {
            opacity: 1;
            position: absolute;
            content: "";
            display: block;
            background: black;
            height: 24px;
            width: 24px;
            top: 2px;
        }
    }

    label {
        line-height: 24px;
        padding-left: 10px;
    }
}

Answer 1

Old browsers unfortunately aren't able to style radio buttons. What you should do is to use a plugin like http://fronteed.com/iCheck/ which automatically creates div based checkboxes that you can style on your own and clicking on those sync with the actual checkboxes.