CODEWITHSUNDEEP
cssinternet-explorer-8
user2028856
user2028856

Reputation: 3183

CSS hide input checkbox in Internet Explorer

I have the following html input:

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

I also have the following CSS:

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

This works in Safari, Chrome and all others. But in Internet Explorer 8, the checkboxes still show up. My question is, how do I use CSS to hide the input checkboxes in Internet Explorer 8?

Thanks

Upvotes: 2

Views: 6803

Answers (3)

Mahmoud Felfel
Mahmoud Felfel

Reputation: 3209

To achieve that for ie10+ you can use ::-ms-check with display:none https://msdn.microsoft.com/en-us/library/hh771816(v=vs.85).aspx

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

UPDATE: for ie8, ie9

you can use the same technique in this answer 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;
     }

Upvotes: 4

Mr_Green
Mr_Green

Reputation: 41832

Try:

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

Upvotes: 0

kampfkuchen
kampfkuchen

Reputation: 484

Why don't you just hide it in every browser? Or is there a reason it should show in Opera? You could try: 

.selectit input {
     display: none;
}

Upvotes: 1

Related Questions