html - CSS 自定义复选框不显示在 IE9 上的另一个复选框中

Question

我有一个使用此 CSS 代码生成的复选框列表:

.regularCheckbox 
{
-webkit-appearance: none; /* WebKit */
-moz-appearance: none; /* Mozilla */
-o-appearance: none; /* Opera */
-ms-appearance: none; /* Internet Explorer */
-webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

问题是在 IE 上，标准复选框显示在我创建的复选框中。

http://jsfiddle.net/Naqmj/

我该如何解决这个问题？

谢谢!

Answer 1

尝试使用 Javascript 解决方案。 我设置了一个 jsFiddle 示例来使用 JS。这将跨浏览器工作。 IE 您无权访问 ms-appearance。没有一个我不认为。这是示例 jsfiddle.net/JgJaU .是的，很多，但如果您想要跨浏览器兼容性，这就是它所需要的。

我也确实找到了这个例子。看起来很有希望，但它使用了 Sprite 图像。 http://csscheckbox.com/ .仅 CSS 复选框。

唯一的问题是任何低于 IE9 的东西都会崩溃。因此，Javascript 解决方案将是您最好的选择。

看起来像这样:

input[type=checkbox].css-checkbox {display:none;}

input[type=checkbox].css-checkbox + label.css-label {
                        padding-left:20px;
                        height:15px; 
                        display:inline-block;
                        line-height:15px;
                        background-repeat:no-repeat;
                        background-position: 0 0;
                        font-size:15px;
                        vertical-align:middle;
                        cursor:pointer;
                    }

input[type=checkbox].css-checkbox:checked + label.css-label {
                        background-position: 0 -15px;
                    }

                    .css-label{
                        background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
                    }

HTML:

  <input id="demo_box_1" class="css-checkbox" type="checkbox" />
                <label for="demo_box_1" name="demo_lbl_1" class="css-label">Option #1</label>
                <!-- Checkbox powered by CssCheckbox.com -->

                <input id="demo_box_2" class="css-checkbox" type="checkbox" checked="checked" />
                <label for="demo_box_2" name="demo_lbl_2" class="css-label">Selected Option</label>
                <!-- Checkbox powered by CssCheckbox.com -->

                <input id="demo_box_3" class="css-checkbox" type="checkbox" />
                <label for="demo_box_3" name="demo_lbl_3" class="css-label">Option #3</label>
                <!-- Checkbox powered by CssCheckbox.com -->