Question

有没有办法调整<input type="checkbox" />

的尺寸

我已经尝试使用style="width:30px; height:50px;"方法，但它没有用。有任何想法吗？这甚至可能吗？

Answer 1

不，我认为只有使用html / css才有办法实现。

你可以制作一个叠加（div），它位于复选框的正上方并使其可见。使用此叠加层，您可以添加自己的复选框图形，并在用户单击图像时更改其图像（= 可见值）。此外，您必须手动更新真实复选框的值，以确保可以发送包含复选框的表单值的表单。

这种技术经常被像QooxDoo，ExtJS等RIA框架使用。

here你会找到一个很好的例子来说明如何使用所描述的技术。

Answer 2

是的，这是可能的。

您可以使用scale CSS属性的transform函数更改复选框的大小，该属性可以放大或缩小复选框。

Firefox 16.0+和Internet Explorer 10.0+支持直接调用转换属性，而旧版本和基于Webkit的浏览器（Chrome，Safari）需要自己的前缀（more on browser compatibility）。

简单示例：

<style type="text/css"> 
  input[type="checkbox"] {
    /* Double-sized Checkboxes */
    transform: scale(2);         /* FF 16+, IE 10+ */
    -webkit-transform: scale(2); /* Chrome, Safari 3.5+, Opera 15+ */

    -ms-transform: scale(2);     /* legacy: IE 9+ */
    -moz-transform: scale(2);    /* legacy: FF 3.5+ */
    -o-transform: scale(2);      /* legacy: Opera 10.5 */
  }
</style>

...

<form>
  <input type="checkbox" />
</form>

CSS：调整复选框大小

2 个答案: