使用CSS复选框大小更改

如何在没有class和id的情况下更改复选框大小（globaly）？是否有可能以与以下不同的方式做到这一点：使用CSS复选框大小更改

input[type=checkbox] { 
    zoom: 1.5; 
}

来源

2014-08-28 Klapsius

为什么这种方法不适合你？ – 2014-08-28 13:15:38

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/

来源

2014-08-28 13:13:56 Charleshaa

我想我在我的网站上使用这个...可能是错误的检查 – Charleshaa 2014-08-28 13:15:23

这项工作我只是检查 – Klapsius 2014-08-28 13:16:15

我站在纠正;我在自己的测试中使用'150％'进行测试，将复选框移动到更大的区域，但保持相同的大小。使用'px'确实会改变复选框本身的大小。此前评论撤回。 – 2014-08-28 13:18:36

您可能想要这样做。

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

来源

2014-08-28 13:13:45 Shreejibawa

这不是被接受的答案吗？ – Rap 2015-02-16 22:36:49

该解决方案对mac中的chrome有问题。复选框是blury – 2015-09-04 12:25:51

你可能想要这样做，但你可能不这样做。它超级像素化，不适用于大多数应用程序。 – losmescaleros 2016-08-03 17:16:44

试试这个

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

来源

2014-08-28 13:24:38

不适用于Firefox – 2016-08-12 11:26:08

使用CSS复选框大小更改

回答

相关问题