HTML / CSS：如何在放大时使复选框增大，在缩小时如何缩小？
[英]HTML/CSS: how can I make the checkboxes grow when zooming in and shrink when zooming out?
问题描述
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 提前致谢
4 个解决方案
解决方案1
5 已采纳 2013-01-11 02:59:32
Use CSS3 to zoom the list as well as the browser rendered checkboxes! 使用CSS3缩放列表以及浏览器渲染复选框！
.extraLarge ul {
-moz-transform: scale(1.50);
-webkit-transform: scale(1.50);
-o-transform: scale(1.50);
transform: scale(1.50);
padding: 10px;
}
解决方案2
2 2013-01-11 02:12:28
You can do it with CSS3 a by using the :checked selector. 你可以使用：checked选择器使用CSS3 a来完成它。 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. 不幸的是，它在IE9及以下版本中不起作用。
CSS: 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: HTML：
<label for="test">Label for checkbox</label>
<label class="theCheckbox">
<input type="checkbox" name="test"/>
<span></span>
</label>
解决方案3
1 2013-01-11 20:35:17
You could create your own checkbox control, so that you would not rely on the native OS implementation. 您可以创建自己的复选框控件，这样您就不会依赖本机OS实现。 When you create it using common html elements then browser zoom will work smoothly. 使用常见的html元素创建它时，浏览器缩放将顺利运行。
There are plenty of existing plugins for libraries (like jQuery) 库中有很多现有的插件（比如jQuery）
解决方案4
0 2013-01-11 05:29:38
Firefox has a "text-only" zoom feature, unlike Chrome that lacks this feature. Firefox具有“仅文本”缩放功能，与Chrome不同，缺少此功能。
To make everything zoom in Firefox, remove the checkmark and Reset the zoom level. 要使所有内容都放大Firefox，请删除复选标记并重置缩放级别。
For Chrome browser, look into Zoom plugins that have this feature. 对于Chrome浏览器，请查看具有此功能的Zoom插件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.