Question

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

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

结果如下：

enter image description here

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

enter image description here

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

enter image description here

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

Answer 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;
}

Answer 2

您可以使用：checked选择器使用CSS3 a来完成此操作。这样做是使用带有背景图像的样式输入。因此，当您放大/缩小时，它将与文本一起重新调整大小。不幸的是，它在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>

Answer 3

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

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

Answer 4

Firefox不具备“纯文字”缩放功能，与缺少此功能的Chrome不同。

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

enter image description here

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

HTML / CSS：如何在放大时使复选框增大，在缩小时如何缩小？

4 个答案: