Menu
I have this simple code for testing:
<html>
<head>
<style type="text/css">
ul{
float:left;
margin:0;
list-style:none;
padding:0;
}
</style>
</head>
<body>
<ul>
<li><input type="checkbox" id="c1" class="checkBox">a</li>
<li><input type="checkbox" id="c2" class="checkBox"/>b</li>
<li><input type="checkbox" id="c3" class="checkBox"/>c</li>
</ul>
<ul>
<li><input type="checkbox" id="c4" class="checkBox"/>d</li>
<li><input type="checkbox" id="c5" class="checkBox"/>e</li>
<li><input type="checkbox" id="c6" class="checkBox" />f</li>
</ul>
<ul>
<li><input type="checkbox" id="c7" class="checkBox"/>g</li>
<li><input type="checkbox" id="c8" class="checkBox"/>h</li>
<li><input type="checkbox" id="c9" class="checkBox"/>i</li>
</ul>
</body>
</html>
here is the result:
but if I zoom out the text gets smaller but the checkboxes remain the same
and if I zoom in the text gets bigger but the checkboxes remain the same
is it possible to make it so that the checkboxes would change their size as well? for example proportionally to the size of their label? thanks in advance
473
jsFiddle DEMO
Use CSS3 to zoom the list as well as the browser rendered checkboxes!
.extraLarge ul {
-moz-transform: scale(1.50);
-webkit-transform: scale(1.50);
-o-transform: scale(1.50);
transform: scale(1.50);
padding: 10px;
}
You can do it with CSS3 a by using the :checked selector. What this does is use a styled input with a background image. So when you zoom in/out, it will re-size, along with the text. Unfortunately, it doesn't work in IE9 and under.
CSS:
.theCheckbox input {
display: none;
}
.theCheckbox span {
width: 20px;
height: 20px;
display: block;
background: url("link_to_image");
}
.theCheckbox input:checked + span {
background: url("link_to_checked_image");
}
HTML:
<label for="test">Label for checkbox</label>
<label class="theCheckbox">
<input type="checkbox" name="test"/>
<span></span>
</label>
You could create your own checkbox control, so that you would not rely on the native OS implementation. When you create it using common html elements then browser zoom will work smoothly.
There are plenty of existing plugins for libraries (like jQuery)
29
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
