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/

- samyb8

---

你不需要为IE使用-ms-box-shadow吗？ - karthikr

你正在测试哪个版本的IE？请在询问IE问题时指定，因为这会有很大的区别。 - Spudley

@karthikr - 不需要；IE9/10可以接受未加前缀的box-shadow。但是他至少需要提供未加前缀的版本... IE 绝对不会识别-moz-或-webkit-版本。 - Spudley

不需要使用“-moz-box-shadow”和“-webkit-box-shadow”。 - Niet the Dark Absol

使用IE9。不确定为什么它仍然显示标准复选框。 - samyb8

自定义复选框非常难以使用且不可靠。我们也遇到了同样的问题。我建议使用JavaScript或jQuery解决方案。 - ClosDesign

Answer 1

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

我也找到了这个例子。看起来很有前途，但它使用了精灵图像。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 -->

- ClosDesign