Question

我有以下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中的输入复选框？

由于

Answer 1

为了达到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;
     }

Answer 2

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

.selectit input {
     display: none;
}

Answer 3

尝试：

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

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

3 个答案: