CSS：调整大小复选框

Question

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

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

Answer 1

不，我不认为有办法通过只使用HTML/CSS。

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

这种技术通常使用RIA框架类似的Qooxdoo，ExtJS的，等等

here你会发现如何使用所描述的技术一个非常好的例子。

Answer 2

是的，这是可能的。

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

Firefox 16.0+和Internet Explorer 10.0+支持直接调用transform属性，而旧版本和基于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>