Why are radio buttons and checkboxes so tiny in IE9?

Question

This is a screenshot from Bootstrap in IE9 but this seems to be the default. I don't understand why these controls are so tiny.

In IE6 to IE8 they are much larger and thus more clickable.

Any advice on making them larger using CSS only is appreciated.

Answer 1

I had the same problem with checkbox. We use bootstrap.css and there is the rule

input {
    box-sizing: border-box;
}

It caused to this problem in my case. So I add folowing style to my checkbox and it solved the issue:

.my-class input {
    box-sizing: content-box;
}

Hope it will help somebody.

Answer 2

You can resize both radio buttons and checkbox's with the help of scale function.

CSS Code:

input[type=radio],input[type=checkbox] { 
-ms-transform:scale(2,2);
transform: scale(2, 2); 
-moz-transform: scale(2, 2); 
-webkit-transform: scale(2, 2); 
-o-transform: scale(2, 2); 
}

Sample JS Fiddle

Answer 3

Checkboxes/Radio Groups... generally fail to resize in cross browser support.. Without playing around with them quickly.. I do recall this was always a pain in the ###..

Personally i would suggest finding a replacement element for them, this is why there are so many packages out there that support graphical versions of them.

While using transform/height/width will work in some cases... You will still end up with certain browsers failing to adjust them. So it could be that your page has a generally larger scale but they fail to scale.

Not ideally a good answer, but this goes from past experiences.

Answer 4

None of the solutions found so far were working in IE9 here. I finally found mention of the \\ ; hack and tried it. Presto!

/* IE9 */
:root input#my-checkbox {
    width:20px !important \ ;
    height:20px !important \ ;
    box-sizing:content-box !important \ ;
}

This may also affect checkboxes in IE8? IE10? but we have separate conditionals for those anyway.