2

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;
    }
}
Ciel
  • 4,290
  • 8
  • 51
  • 110

1 Answers1

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.

descene
  • 81
  • 3
  • But Firefox and IE11 are not old browsers. Why would it not work for them? – Ciel Mar 20 '14 at 16:46
  • I mentioned older browsers as you can use the appearance method to none in the new browsers, as described here: https://support.mozilla.org/en-US/questions/958668 but unfortunately you'll have to do it in so many places so one should rather just go for a plugin like iCheck... or follow this thread: http://stackoverflow.com/questions/13613933/styling-radio-button-not-work-in-ie-and-firefox – descene Mar 20 '14 at 19:03
  • unfortunately, I am using an mvvm system, so this won't work. It doesn't seem to pass the events down properly. – Ciel Mar 21 '14 at 15:15
  • Hey, using the newest beta of iCheck 2.0, I got this to work. Thanks. – Ciel Mar 27 '14 at 19:25