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。是的，它很多，但是如果你想要跨浏览器兼容性，这就是它所需要的。

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

CSS自定义内置复选框不显示在IE9上的另一个复选框内

1 个答案: