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

发布时间：2020-12-14 16:36:34 所属栏目：资源来源：网络整理

导读：我有这个简单的测试代码： htmlheadstyle type="text/css" ul{ float:left; margin:0; list-style:none; padding:0; }/style /headbody ul liinput type="checkbox" id="c1" class="checkBox"a/li liinput type="checkbox" id="c2" class="checkBox"/b/li li

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

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

这是结果：

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

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

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

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!