CSS hide input checkbox in Internet Explorer

Question

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

`display: none` seems to work fine.. [fiddle](http://jsfiddle.net/KJ2cC/). — Mr_Green, Apr 02 '14 at 08:05
The thing is, I use jquery to change the input's background a checked sign when clicked. So if I set it to display none, then the background also gets displayed none when clicked — user2028856, Apr 02 '14 at 08:19
@Paulie_D Tried `visibility: hidden`, it hides the checkbox but like I said above, it also hides the background checkmark I'm using instead of the default checkbox. So I need a way to hide the default checkbox but still display my own custom checkmark background — user2028856, Apr 02 '14 at 09:46

score 4 · Answer 1 · edited May 23 '17 at 11:59

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;
     }

score 1 · Answer 2 · answered Apr 02 '14 at 08:05

1

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;
}

answered Apr 02 '14 at 08:05

kampfkuchen

454
1
4
20

The thing is, I use jquery to change the input's background a checked sign when clicked. So if I set it to display none, then the background also gets displayed none when clicked – user2028856 Apr 02 '14 at 08:18
Alternatively I can change the background-color of the input checkbox if that is a possibility, do you know how do I do that? – user2028856 Apr 02 '14 at 08:18
If you use display:none you aren't able to tab onto the field and it would probably 'confuse' some screen readers – Laurence Lord Feb 21 '18 at 11:04

Mr_Green · Answer 3 · 2014-04-02T08:52:26.270

0

Try:

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

edited Apr 02 '14 at 08:52

answered Apr 02 '14 at 08:39

Mr_Green

40,727
45
159
271

margin-left: -20px can't work for me because doing that also hides the checkmark background image which is in the same position as the checkboxes. I haven't tried width: 0px in IE but in Chrome I still see the default checkboxes, just a bit smaller – user2028856 Apr 02 '14 at 08:49
In Chrome don't you see the checkbox? It's partially obstructed by the text – user2028856 Apr 02 '14 at 08:51
@user2028856 you are posting my old fiddle always.. please update the fiddle. (_check for "update" button in that fiddle and then share the link_) – Mr_Green Apr 02 '14 at 08:55
@user2028856 looks good to me..? the checkbox is not visible. this is what you want right? please explain clearly and also share a screenshot if possible. – Mr_Green Apr 02 '14 at 09:02
I totally don't get this. I'm using Chrome on OS X Maverick. http://snag.gy/yFREa.jpg – user2028856 Apr 02 '14 at 09:07
@user2028856 hmm seems buggy.. try this [fiddle](http://jsfiddle.net/KJ2cC/4/). also you can make it better by giving `right` property more than `100%` with parent container set to `overflow: hidden`. – Mr_Green Apr 02 '14 at 09:12
This is what I see http://snag.gy/WXzp4.jpg Are you able to send me a screenshot of what you see? – user2028856 Apr 02 '14 at 09:19
Try giving `right: 200%` or `visibility: hidden` (_this should work_). here I can see good check this [screenshot](http://i.imgur.com/zW9vAH2.png). – Mr_Green Apr 02 '14 at 09:44
I guess my issue can't be resolve so easily. I do manage to get the default checkbox to become hidden but then the background custom checkmark doesn't get displayed anymore – user2028856 Apr 02 '14 at 11:09
@user2028856 I can't understand what you mean by background custom checkmark.. can you please make a small fiddle of that? – Mr_Green Apr 02 '14 at 14:11

CSS hide input checkbox in Internet Explorer

3 Answers3