CSS：调整复选框大小答案

【问题标题】：CSS: adjusting checkbox sizeCSS：调整复选框大小
【发布时间】：2014-02-23 10:18:30
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

不，我认为没有办法只使用 html / css。

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

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

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

【讨论】：

【解决方案2】：

是的，有可能。

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

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>

【讨论】：