HTML / CSS中的checkbox大小

是否可以使用CSS或HTML设置checkbox的大小？

width和size在IE6 +下工作，而不是Firefox，即使设置了较小的尺寸，checkbox仍然保持16×16。

Answer 1

这是一个有点丑陋（由于扩大），但它适用于大多数较新的浏览器：

 input[type=checkbox] { /* Double-sized Checkboxes */ -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FF */ -webkit-transform: scale(2); /* Safari and Chrome */ -o-transform: scale(2); /* Opera */ padding: 10px; } /* Might want to wrap a span around your checkbox text */ .checkboxtext { /* Checkbox text */ font-size: 110%; display: inline; } 

 <input type="checkbox" name="optiona" id="opta" checked /> <span class="checkboxtext"> Option A </span> <input type="checkbox" name="optionb" id="optb" /> <span class="checkboxtext"> Option B </span> <input type="checkbox" name="optionc" id="optc" /> <span class="checkboxtext"> Option C </span> 

Answer 2

所有现代浏览器的工作解决scheme。

 input[type=checkbox] { transform: scale(1.5); } 

---

兼容性：

• IE：10+
• FF：16+
• Chrome：36+
• Safari：9+
• 歌剧：23+
• iOS Safari：9.2+
• Chrome for Android：51+

---

出现：

• Chrome 58（2017年5月），Windows 10

Answer 3

一个简单的解决scheme是使用属性zoom ：

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

Answer 4

预习：
http://jsfiddle.net/h4qka9td/

 *,*:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } .switch { margin: 50px auto; position: relative; } .switch label { width: 100%; height: 100%; position: relative; display: block; } .switch input { top: 0; right: 0; bottom: 0; left: 0; opacity: 0; z-index: 100; position: absolute; width: 100%; height: 100%; cursor: pointer; } /* DEMO 3 */ .switch.demo3 { width: 180px; height: 50px; } .switch.demo3 label { display: block; width: 100%; height: 100%; background: #a5a39d; border-radius: 40px; box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.5); } .switch.demo3 label:after { content: ""; position: absolute; z-index: -1; top: -8px; right: -8px; bottom: -8px; left: -8px; border-radius: inherit; background: #ababab; background: -moz-linear-gradient(#f2f2f2, #ababab); background: -ms-linear-gradient(#f2f2f2, #ababab); background: -o-linear-gradient(#f2f2f2, #ababab); background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab)); background: -webkit-linear-gradient(#f2f2f2, #ababab); background: linear-gradient(#f2f2f2, #ababab); box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.25); } .switch.demo3 label:before { content: ""; position: absolute; z-index: -1; top: -18px; right: -18px; bottom: -18px; left: -18px; border-radius: inherit; background: #eee; background: -moz-linear-gradient(#e5e7e6, #eee); background: -ms-linear-gradient(#e5e7e6, #eee); background: -o-linear-gradient(#e5e7e6, #eee); background: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e7e6), to(#eee)); background: -webkit-linear-gradient(#e5e7e6, #eee); background: linear-gradient(#e5e7e6, #eee); box-shadow: 0 1px 0 rgba(255,255,255,0.5); -webkit-filter: blur(1px); -moz-filter: blur(1px); -ms-filter: blur(1px); -o-filter: blur(1px); filter: blur(1px); } .switch.demo3 label i { display: block; height: 100%; width: 60%; border-radius: inherit; background: silver; position: absolute; z-index: 2; right: 40%; top: 0; background: #b2ac9e; background: -moz-linear-gradient(#f7f2f6, #b2ac9e); background: -ms-linear-gradient(#f7f2f6, #b2ac9e); background: -o-linear-gradient(#f7f2f6, #b2ac9e); background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e)); background: -webkit-linear-gradient(#f7f2f6, #b2ac9e); background: linear-gradient(#f7f2f6, #b2ac9e); box-shadow: inset 0 1px 0 white, 0 0 8px rgba(0,0,0,0.3), 0 5px 5px rgba(0,0,0,0.2); } .switch.demo3 label i:after { content: ""; position: absolute; left: 15%; top: 25%; width: 70%; height: 50%; background: #d2cbc3; background: -moz-linear-gradient(#cbc7bc, #d2cbc3); background: -ms-linear-gradient(#cbc7bc, #d2cbc3); background: -o-linear-gradient(#cbc7bc, #d2cbc3); background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3)); background: -webkit-linear-gradient(#cbc7bc, #d2cbc3); background: linear-gradient(#cbc7bc, #d2cbc3); border-radius: inherit; } .switch.demo3 label i:before { content: "off"; text-transform: uppercase; font-style: normal; font-weight: bold; color: rgba(0,0,0,0.4); text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e; font-family: Helvetica, Arial, sans-serif; font-size: 24px; position: absolute; top: 50%; margin-top: -12px; right: -50%; } .switch.demo3 input:checked ~ label { background: #9abb82; } .switch.demo3 input:checked ~ label i { right: -1%; } .switch.demo3 input:checked ~ label i:before { content: "on"; right: 115%; color: #82a06a; text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659; } 

 <div class="switch demo3"> <input type="checkbox"> <label><i></i> </label> </div> <div class="switch demo3"> <input type="checkbox" checked> <label><i></i> </label> </div> 

Answer 5

2017版本 ： https ： //jsfiddle.net/ksvx2txb/11/

关于 ：如果浏览器支持，将使用CSS缩放function，如果不支持，将使用transform：scale。

为什么不使用转换？ 在一些浏览器上看起来很丑，包括mac上的chrome。

铬 – 工程
火狐（mac） – 工作
歌剧 – 作品
边缘 – 作品

火狐（赢） – 大，模糊！
Safari – 大，模糊！

 @supports (zoom:2) { input[type="radio"], input[type=checkbox]{ zoom: 2; } } @supports not (zoom:2) { input[type="radio"], input[type=checkbox]{ transform: scale(2); margin: 15px; } } label{ /* fix vertical align issues */ display: inline-block; vertical-align: top; margin-top: 10px; } 

 <input type="radio" name="aa" value="1" id="aa" checked /> <label for="aa">Radio 1</label> <br /> <input type="radio" name="aa" value="2" id="bb" /> <label for="bb">Radio 2</label> <br /><br /> <input type="checkbox" name="optiona" id="cc" checked /> <label for="cc">Checkbox 1</label> <br /> <input type="checkbox" name="optiona" id="dd" /> <label for="dd">Checkbox 1</label> 

Answer 6

我正在寻找一个稍微大一点的checkbox，并查看了37Signals Basecamp的源代码以find以下解决scheme –

您可以更改字体大小以使checkbox略大一些：

 font-size: x-large; 

然后，您可以通过执行以下操作正确地alignmentcheckbox：

 vertical-align: top; margin-top: 3px; /* change to center it */ 

Answer 7

今天发现这个有用的提示：你可以使Safari中的checkbox更大 – 这通常是对常规方法的抵抗 – 具有以下属性： -webkit-transform: scale(1.3, 1.3);

Answer 8

我的理解是，做这个跨浏览器并不容易。 而不是试图操纵checkbox控件，您可以始终使用图像，JavaScript和隐藏的input字段来构build自己的实现。 我假设这与niceforms（类似于Staicu lonut的答案）类似，但是实现并不会特别困难。 我相信jQuery有一个插件来允许这个自定义的行为（如果我能find它将查找链接和张贴在这里）。

Answer 9

其他答案显示像素checkbox，而我想要美丽的东西。 结果如下所示：

即使这个版本更复杂，我认为值得一试。

HTML

 <label class="checkbox-list__item"> <input class="checkbox_buttons" type="checkbox" checked="checked" style="display: none;"> <div class="checkbox-list__check"></div> </label> 

SCSS

 .checkbox-list__item { position: relative; padding: 10px 0; display: block; cursor: pointer; margin: 0 0 0 34px; border-bottom: 1px solid #b4bcc2; &:last-of-type { border-bottom: 0; } } .checkbox-list__check { width: 18px; height: 18px; border: 3px solid #b4bcc2; position: absolute; left: -34px; top: 50%; margin-top: -12px; transition: border .3s ease; border-radius: 5px; &:before { position: absolute; display: block; width: 18px; height: 22px; top: -2px; left: 0px; padding-left: 2px; background-color: transparent; transition: background-color .3s ease; content: '\2713'; font-family: initial; font-size: 19px; color: white; } } // Checked state input[type="checkbox"]:checked ~ .checkbox-list__check { border-color: #5bc0de; &:before { background-color: #5bc0de; } } 

Jsfiddle： https ：//jsfiddle.net/asbd4hpr/

Answer 10

做这个

 -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FF */ -webkit-transform: scale(2); /* Safari and Chrome */ -o-transform: scale(2); /* Opera */ ms-filter: contrast(200%); -moz-filter: contrast(200%); -webkit-filter: contrast(200%); -o-filter: contrast(200%); filter: contrast(200%); 

而你的checkbox又漂亮了。

Answer 11

问题是Firefox不听宽度和高度。 禁用这个和你的好去。

 input[type=checkbox] { width: 25px; height: 25px; -moz-appearance: none; } 

Answer 12

我刚刚出来这个：

 input[type="checkbox"] {display:none;} input[type="checkbox"] + label:before {content:"☐";} input:checked + label:before {content:"☑";} label:hover {color:blue;} 

 <input id="check" type="checkbox" /><label for="check">Checkbox</label>