HTML/CSS：如何使复选框在放大时放大并在缩小时缩小？答案

【问题标题】：HTML/CSS: how can I make the checkboxes grow when zooming in and shrink when zooming out?HTML/CSS：如何使复选框在放大时放大并在缩小时缩小？
【发布时间】：2012-11-26 13:38:39
【问题描述】：

我有这个简单的测试代码：

<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>

结果如下：

但如果我缩小文本会变小但复选框保持不变

如果我放大文本会变大但复选框保持不变

是否有可能使复选框也改变它们的大小？例如与标签的大小成比例？提前致谢

【问题讨论】：

你不能这样做，顺便说一句，你完全错误地标记了你的问题
感谢您的注意，它们是我用来回答我想问但最终没有问过的问题的标签。
是的，您不能调整复选框的大小。您不能设置复选框的样式。它们由操作系统呈现。我知道一种解决方案 - 使用 JS 隐藏复选框，然后创建一个新的 html 元素（跨度、div）并模拟行为。然后，您可以使用 Media Queries 为这个新元素设置样式。
@marinbgd 不一定要用 JS。它只能在所有后 IE8 浏览器中使用 CSS 实现。
@marinbgd 我认为这不是问题的正确答案，所以这里有一个demo 供您提问。

标签： html css checkbox

【解决方案1】：

jsFiddle DEMO

使用 CSS3 缩放列表以及浏览器呈现的复选框！

.extraLarge ul {
  -moz-transform: scale(1.50);
  -webkit-transform: scale(1.50);
  -o-transform: scale(1.50);
  transform: scale(1.50);
  padding: 10px;
}

【讨论】：

我什至不知道这是可能的。好东西:)
严格来说，仅此一项并不能解决 OP 描述的问题：当您更改浏览器缩放时，除了默认缩放之外，复选框仍然会太小或太大。

【解决方案2】：

您可以使用 CSS3 a 使用 :checked 选择器来实现。这样做是使用带有背景图像的样式输入。因此，当您放大/缩小时，它将与文本一起重新调整大小。不幸的是，它在 IE9 及以下版本中不起作用。

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>

【讨论】：

【解决方案3】：

您可以创建自己的复选框控件，这样您就不会依赖本机操作系统实现。当您使用常见的 html 元素创建它时，浏览器缩放将顺利进行。

有很多现有的库插件（如 jQuery）

【讨论】：

【解决方案4】：

Firefox 有一个“纯文本”缩放功能，不像 Chrome 没有这个功能。

要使一切在 Firefox 中放大，请删除复选标记并重置缩放级别。

对于 Chrome 浏览器，请查看具有此功能的 Zoom 插件。

【讨论】：