网页中的复选框 - 如何使它们更大？

Question

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

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

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浮动:离开并放置你的标签,浮动:左边.

Answer 3

试试这个CSS

input[type=checkbox] {width:100px; height:100px;}

Answer 4

我尝试改变paddingand 和marginand 以及widthand height，然后终于发现如果你只是增加比例它会起作用：

input[type=checkbox] {
    transform: scale(1.5);
}

Answer 5

仅纯现代 2020 CSS决定，没有模糊缩放或不方便的转换。并带有勾号！=)

\n

在 Firefox 和基于 Chromium 的浏览器中运行良好。

\n

因此，您可以纯粹通过设置父块来规则您的复选框ADAPTIVEfont-size，它会随着文本而增长！

\n

\r\n

\r\n

input[type=\'checkbox\'] {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  vertical-align: middle;\n  outline: none;\n  font-size: inherit;\n  cursor: pointer;\n  width: 1.0em;\n  height: 1.0em;\n  background: white;\n  border-radius: 0.25em;\n  border: 0.125em solid #555;\n  position: relative;\n}\n\ninput[type=\'checkbox\']:checked {\n  background: #adf;\n}\n\ninput[type=\'checkbox\']:checked:after {\n  content: "\xe2\x9c\x94";\n  position: absolute;\n  font-size: 90%;\n  left: 0.0625em;\n  top: -0.25em;\n}

\r\n

<label for="check1"><input type="checkbox" id="check1" checked="checked" /> checkbox one</label>\n<label for="check2"><input type="checkbox" id="check2" /> another checkbox</label>\n<label for="check3" style="font-size:150%"><input type="checkbox" id="check3" checked="checked" /> bigger checkbox </label>

\r\n

\r\n

\r\n

\n