Html CSS定制复选框未显示在IE9上的其他复选框中

我有一个使用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上的标准复选框显示在我创建的复选框中

我怎样才能解决这个问题

---

谢谢

尝试使用Javascript解决方案。 我设置了一个JSFIDLE示例来使用JS。这将跨浏览器工作。即您无法访问ms外观。我想没有一个不是。下面是一个例子。是的，这是很多，但如果你想要跨浏览器的兼容性，这就是需要的

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

选项1
选定选项
选项3

您不需要ie的

-ms-box阴影吗？您正在测试哪个ie版本？请在问IE问题时详细说明，因为这会产生很大的不同。@karthikr-不，你没有；IE9/10可以接受
框阴影
不固定。但他至少需要提供不固定的版本。。。IE绝对不会选择
-moz-
或
-webkit-
版本。
-moz-box-shadow
和
-webkit-box-shadow
也不需要。使用IE9。不确定为什么它仍然显示标准复选框
  <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 -->