【问题标题】：CSS - difficulty with custom check boxes between IE and FirefoxCSS - IE 和 Firefox 之间的自定义复选框的困难
【发布时间】：2014-03-20 11:25:58
【问题描述】：

我编写了一些代码来帮助“皮肤”复选框和单选按钮仅使用 CSS。它工作得非常非常好......

.... 在 Chrome 中。

但是在 FireFox 和 IE 中，它只是......彻底失败了。我完全不知道为什么。它的基本要点是它在内容之前使用:before 加载一个块，然后将其放置在默认元素上。当然它会被精灵替换，但我必须首先让外层行为发挥作用。代码是这样工作的；它在 HTML 中的布局方式是因为我使用的是Bootstrap，而我只是坚持它布局表单字段的方式。我也有一个 Fiddle 来演示这个问题。

样品

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;
    }
}

【问题讨论】：

标签： css internet-explorer firefox

【解决方案1】：

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

【讨论】：

但是 Firefox 和 IE11 不是老浏览器。为什么它对他们不起作用？
我提到了旧浏览器，因为您可以在新浏览器中使用外观方法，如下所述：support.mozilla.org/en-US/questions/958668 但不幸的是，您必须在很多地方这样做，所以应该宁愿只需使用 iCheck 之类的插件...或关注此线程：stackoverflow.com/questions/13613933/…
不幸的是，我使用的是 mvvm 系统，所以这不起作用。它似乎没有正确传递事件。
嘿，使用最新的 iCheck 2.0 测试版，我得到了这个工作。谢谢。