CSS:调整复选框大小

Question

有没有办法调整一个维度 <input type="checkbox" />

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

Answer 1

不,我认为只有使用html/css才能做到这一点.

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

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

在这里,您将找到一个如何使用所描述技术的非常好的示例.

Answer 2

对的,这是可能的.

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

火狐16.0+和Internet Explorer 10.0+支持transform属性的直接调用,而旧版本和基于WebKit的浏览器(Chrome浏览器,Safari浏览器)需要自己的前缀(更多浏览器的兼容性).

简单的例子:

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