Menu
IE9 render checkboxes all stretched and ALL other browsers keep the size of the checkbox but expand a click able invisible area.
Can this behavior be disabled in IE9, via css, without changing the behavior of other browser (invisible area)?
This seems to be impossible to have the normal checkbox. Even by selecting other compatibility mode.
I have Windows Vista SP2, 64bits, IE 9.0.8112.16421. Tested on 2 computers with about the same configuration.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>IE IS GREAT?</title>
<style>
body
{
}
#test_checkbox
{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="test_box">
<input type="checkbox" id="test_checkbox" />
</div>
</body>
</html>
384
Maybe you can use a label? That will allow you to expand the clickable area:
<label for="test_checkbox" style="display: block; width: 300px; height: 300px;">
<input type="checkbox" id="test_checkbox" />
</label>
EDIT: Example centered:
<label for="test_checkbox" style="display: block;">
<input type="checkbox" id="test_checkbox" style="margin: 150px;" />
</label>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
