Html 网页中的复选框——如何使它们变大？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4137255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Checkboxes in web pages – how to make them bigger?
提问by Tony the Pony
The standard checkboxes rendered in most browsers are quite small and don't increase in size even when a larger font is used. What is the best, browser-independent way to display larger checkboxes?
大多数浏览器中呈现的标准复选框都非常小，即使使用较大的字体也不会增加大小。显示较大复选框的最佳、独立于浏览器的方式是什么？
回答by Paul
In case this can help anyone, here's simple CSS as a jumping off point. Turns it into a basic rounded square big enough for thumbs with a toggled background color.
如果这可以帮助任何人，这里有一个简单的 CSS 作为起点。将它变成一个基本的圆角正方形，足够大，可以用切换的背景颜色来显示拇指。
input[type='checkbox'] {
-webkit-appearance:none;
width:30px;
height:30px;
background:white;
border-radius:5px;
border:2px solid #555;
}
input[type='checkbox']:checked {
background: #abd;
}<input type="checkbox" />回答by FlorianB
Actually there is a way to make them bigger, checkboxes just like anything else (even an iframe like a facebook button).
实际上有一种方法可以使它们变大，复选框就像其他任何东西一样（甚至是像 facebook 按钮这样的 iframe）。
Wrap them in a "zoomed" element:
将它们包裹在“缩放”元素中：
.double {
zoom: 2;
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-moz-transform: scale(2);
transform-origin: 0 0;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-moz-transform-origin: 0 0;
}<div class="double">
<input type="checkbox" name="hello" value="1">
</div>It might look a little bit "rescaled" but it works.
它可能看起来有点“重新缩放”，但它有效。
Of course you can make that div float:left and put your label besides it, float:left too.
当然，您可以使该 div float:left 并将您的标签放在它旁边， float:left 也是。
回答by Collin White
Try this CSS
试试这个 CSS
input[type=checkbox] {width:100px; height:100px;}
回答by Justin
I tried changing the paddingand marginand well as the widthand height, and then finally found that if you just increase the scale it'll work:
我尝试改变paddingand 和marginand 以及widthand height，然后终于发现如果你只是增加比例它会起作用：
input[type=checkbox] {
transform: scale(1.5);
}
回答by zzzzBov
Here's a trick that works in most recent browsers (IE9+) as a CSS only solution that can be improved with javascript to support IE8 and below.
这是一个适用于大多数最新浏览器（IE9+）的技巧，作为仅 CSS 的解决方案，可以使用 javascript 进行改进以支持 IE8 及更低版本。
<div>
<input type="checkbox" id="checkboxID" name="checkboxName" value="whatever" />
<label for="checkboxID"> </label>
</div>
Style the labelwith what you want the checkbox to look like
label使用您希望复选框的样式设置样式
#checkboxID
{
position: absolute fixed;
margin-right: 2000px;
right: 100%;
}
#checkboxID + label
{
/* unchecked state */
}
#checkboxID:checked + label
{
/* checked state */
}For javascript, you'll be able to add classes to the label to show the state. Also, it would be wise to use the following function:
对于 javascript，您将能够向标签添加类以显示状态。此外，使用以下函数是明智的：
$('label[for]').live('click', function(e){
$('#' + $(this).attr('for') ).click();
return false;
});
EDIT to modify #checkboxIDstyles
编辑以修改#checkboxID样式
回答by wesamot
I'm writtinga phonegap app, and checkboxes vary in size, look, etc. So I made my own simple checkbox:
我正在编写 phonegap 应用程序，复选框的大小、外观等各不相同。所以我制作了自己的简单复选框：
First the HTML code:
首先是 HTML 代码：
<span role="checkbox"/>
Then the CSS:
然后是 CSS：
[role=checkbox]{
background-image: url(../img/checkbox_nc.png);
height: 15px;
width: 15px;
display: inline-block;
margin: 0 5px 0 5px;
cursor: pointer;
}
.checked[role=checkbox]{
background-image: url(../img/checkbox_c.png);
}
To toggle checkbox state, I used JQuery:
为了切换复选框状态，我使用了 JQuery：
CLICKEVENT='touchend';
function createCheckboxes()
{
$('[role=checkbox]').bind(CLICKEVENT,function()
{
$(this).toggleClass('checked');
});
}
But It can easily be done without it...
但是没有它也可以轻松完成......
Hope it can help!
希望能帮到你！
回答by FlameStorm
Pure modern 2020 CSS onlydecision, without blurry scaling or non-handy transforming. And with tick! =)
纯现代 2020 CSS 唯一决定，没有模糊缩放或不方便的转换。并带有勾号！=)
Works nice in Firefox and Chromium-based browsers.
在 Firefox 和基于 Chromium 的浏览器中运行良好。
So, you can rule your checkboxes purely ADAPTIVE, just by setting parent block's font-heightand it will grow with text!
因此，您可以完全自适应地统治您的复选框，只需设置父块font-height，它就会随着文本而增长！
input[type='checkbox'] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
outline: none;
font-size: inherit;
cursor: pointer;
width: 1.0em;
height: 1.0em;
background: white;
border-radius: 0.25em;
border: 0.125em solid #555;
position: relative;
}
input[type='checkbox']:checked {
background: #adf;
}
input[type='checkbox']:checked:after {
content: "?";
position: absolute;
font-size: 90%;
left: 0.0625em;
top: -0.25em;
}<label for="check1"><input type="checkbox" id="check1" checked="checked" /> checkbox one</label>
<label for="check2"><input type="checkbox" id="check2" /> another checkbox</label>