网页中的复选框——如何让它们变大？

Question

大多数浏览器中呈现的标准复选框非常小，即使使用更大的字体也不会增加大小。显示较大复选框的最好的、独立于浏览器的方法是什么？

原文由 Tony the Pony 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果这可以帮助任何人，这里是简单的 CSS 作为起点。将它变成一个基本的圆角正方形，大到足以容纳带有切换背景颜色的拇指。

 input[type='checkbox'] {
    -webkit-appearance:none;
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
input[type='checkbox']:checked {
    background: #abd;
}

 <input type="checkbox" />

原文由 Paul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

实际上有一种方法可以使它们更大，复选框就像其他任何东西一样（甚至是像 facebook 按钮这样的 iframe）。

将它们包裹在“缩放”元素中：

 .double {
  zoom: 2;
  transform: scale(2);
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
  -moz-transform: scale(2);
  transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

 <div class="double">
  <input type="checkbox" name="hello" value="1">
</div>

它可能看起来有点“重新缩放”，但它确实有效。

当然你可以让那个 div float:left 并把你的标签放在它旁边， float:left 也是。

原文由 FlorianB 发布，翻译遵循 CC BY-SA 4.0 许可协议