使用CSS复选框大小更改

Kla*_*ius 41 html css mobile

如何在没有class和id的情况下更改复选框大小(globaly)?是否有可能以这样的方式做到这一点:

input[type=checkbox] {
    zoom: 1.5;
}
Run Code Online (Sandbox Code Playgroud)

Cha*_*haa 72

input字段可以根据需要设置样式.因此,您可以拥有,而不是缩放

input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
}
Run Code Online (Sandbox Code Playgroud)

编辑:

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

input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
Run Code Online (Sandbox Code Playgroud)

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

  • 我已经检查了`FireFox` v.31并更改了`width`和`height value`,仍然相同 (2认同)
  • 这很有趣,但没有检查用户如何知道复选框是否已被选中?成为一个神秘的肉形元素没有检查. (2认同)

Shr*_*awa 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;
}
Run Code Online (Sandbox Code Playgroud)

  • 该解决方案对mac的chrome有问题.复选框是blury (12认同)
  • 您可能想要这样做,但您可能不这样做.它是超像素化的,对大多数应用程序来说都是不可接受的. (4认同)

Gen*_*dia 14

试试这个

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

  • 不适用于Firefox (2认同)