使用CSS复选框大小更改

时间:2014-08-28 13:11:05

标签: html css mobile

如何在没有class和id的情况下更改复选框大小(全局)?是否有可能以不同于:

的方式执行此操作
input[type=checkbox] {
    zoom: 1.5;
}

3 个答案:

答案 0 :(得分:62)

input字段可以根据需要设置样式。因此,您可以使用

而不是缩放
input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
}

编辑:

你必须添加这样的额外规则:

input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

检查这个小提琴http://jsfiddle.net/p36tqqyq/1/

答案 1 :(得分:26)

您可能想要这样做。

input[type=checkbox] {

 -ms-transform: scale(2); /* IE */
 -moz-transform: scale(2); /* FF */
 -webkit-transform: scale(2); /* Safari and Chrome */
 -o-transform: scale(2); /* Opera */
  padding: 10px;
}

答案 2 :(得分:10)

试试这个

<input type="checkbox" style="zoom:1.5;" />
/* The value 1.5 i.e., the size of checkbox will be increased by 0.5% */