CODEWITHSUNDEEP
cssinternet-explorer
Wolfr
Wolfr

Reputation: 5164

Why are radio buttons and checkboxes so tiny in IE9?

Tiny radio buttons and checkboxes

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.

Upvotes: 0

Views: 930

Answers (4)

cbmtrx
cbmtrx

Reputation: 610

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.

Upvotes: 0

Natalia Svergun
Natalia Svergun

Reputation: 81

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.

Upvotes: 2

ganesh
ganesh

Reputation: 228

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

Upvotes: 0

Angry 84
Angry 84

Reputation: 2995

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.

Upvotes: 0

Related Questions