CSS - IE和Firefox之间的自定义复选框有困难

Question

我写了一些代码来帮助＆＃34; skin＆＃34;复选框和单选按钮仅使用CSS。它非常，非常好......

....在Chrome中。

然而在FireFox和IE中，它只是......彻底失败了。而且我绝对不知道为什么。它的基本要点是它在内容之前使用:before加载块，然后将其放在默认元素上。当然它将被一个精灵替换，但我必须首先使用outlaying行为。代码就是这样的;它在HTML中的布局方式是因为我使用的是Bootstrap，而我只是坚持它将表单字段放在外面的方式。我也有一个小提琴来证明这个问题。

样品

jsBin

包含原始的LESS内容。

jsFiddle

仅编译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

遗憾的是，旧的浏览器无法设置单选按钮的样式。你应该做的是使用像http://fronteed.com/iCheck/这样的插件，它会自动创建基于div的复选框，您可以自己设置样式并单击与实际复选框的同步。