Internet Explorer 中的 CSS 隐藏输入复选框答案

【问题标题】：CSS hide input checkbox in Internet ExplorerInternet Explorer 中的 CSS 隐藏输入复选框
【发布时间】：2014-05-13 08:37:24
【问题描述】：

我有以下 html 输入：

<label class="selectit">
     <input value="women_shoulder_bags" type="checkbox" id="in-women-15797">Shoulder Bags
</label>

我还有以下 CSS：

.selectit input {
     -webkit-appearance: none;
     -moz-appearance: none;
     -o-appearance: none;
}

这适用于 Safari、Chrome 和所有其他设备。但在 Internet Explorer 8 中，复选框仍然显示。我的问题是，如何使用 CSS 隐藏 Internet Explorer 8 中的输入复选框？

谢谢

【问题讨论】：

display: none 似乎工作正常.. fiddle.
问题是，我使用 jquery 将输入的背景更改为单击时选中的符号。因此，如果我将其设置为不显示，那么单击时背景也会不显示
opacity:0 / visibility:hidden?
@Paulie_D 试过visibility: hidden，它隐藏了复选框，但就像我上面所说的，它还隐藏了我正在使用的背景复选标记而不是默认复选框。所以我需要一种隐藏默认复选框但仍显示我自己的自定义复选标记背景的方法

标签： css internet-explorer-8

【解决方案1】：

为什么不把它隐藏在每个浏览器中呢？或者它是否应该在 Opera 中显示？你可以试试：

.selectit input {
     display: none;
}

【讨论】：

问题是，我使用 jquery 将输入的背景更改为单击时选中的符号。因此，如果我将其设置为不显示，那么单击时背景也会不显示
如果可能的话，我也可以更改输入复选框的背景颜色，你知道我该怎么做吗？
如果您使用 display:none ，您将无法在该字段上使用标签，这可能会“混淆”某些屏幕阅读器

【解决方案2】：

试试：

.selectit input {
    width: 0px;   /* or right: 100%; */
    position: absolute;
}

【讨论】：

margin-left: -20px 对我不起作用，因为这样做还会隐藏与复选框位置相同的复选标记背景图像。我没有在 IE 中尝试过 width: 0px 但在 Chrome 中我仍然看到默认复选框，只是小了一点
在 Chrome 中您没有看到复选框吗？部分被文字挡住了
@user2028856 你总是在发布我的旧小提琴......请更新小提琴。（检查该小提琴中的“更新”按钮，然后分享链接）
@user2028856 对我来说看起来不错..？复选框不可见。这就是你想要的吗？请解释清楚并尽可能分享屏幕截图。
我完全不明白。我在 OS X Maverick 上使用 Chrome。 snag.gy/yFREa.jpg

【解决方案3】：

要为 ie10+ 实现这一目标，您可以使用 ::-ms-check 和 display:none https://msdn.microsoft.com/en-us/library/hh771816(v=vs.85).aspx

input::-ms-check{
    display:none
}

更新：对于 ie8、ie9

您可以在此答案中使用相同的技术https://stackoverflow.com/a/23777214/2253257

    input::-ms-check {
        /* IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        /* IE 5-7 */
        filter: alpha(opacity=0);
        /* Good browsers :) */
        opacity:0;
     }

【讨论】：