8

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

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

结果如下：

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述

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

4

4 回答 4

5

jsFiddle 演示

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

.extraLarge ul {
  -moz-transform: scale(1.50);
  -webkit-transform: scale(1.50);
  -o-transform: scale(1.50);
  transform: scale(1.50);
  padding: 10px;
}
于 2013-01-11T02:59:32.693 回答
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>
于 2013-01-11T02:12:28.433 回答
1

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

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

于 2013-01-11T20:35:17.817 回答
0

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

要在 Firefox 中放大所有内容，请取消选中标记并重置缩放级别。

在此处输入图像描述

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

于 2013-01-11T05:29:38.177 回答