网页中的复选框-如何使它们变大？

大多数浏览器中呈现的标准复选框非常小，即使使用较大的字体也不会增大。什么是最好的，独立于浏览器的方式来显示更大的复选框？

155361 次浏览
小开

试试这个 CSS

input[type=checkbox] {width:100px; height:100px;}
<input type="checkbox" />

小开

这里有一个技巧，在大多数最新的浏览器(IE9 +)作为一个只有 CSS 的解决方案，可以用 javascript 来改进，以支持 IE8及以下版本。

<div>
<input type="checkbox" id="checkboxID" name="checkboxName" value="whatever" />
<label for="checkboxID"> </label>
</div>

按照您希望复选框的样式设置 label的样式

#checkboxID
{
position: absolute fixed;
margin-right: 2000px;
right: 100%;
}
#checkboxID + label
{
/* unchecked state */
}
#checkboxID:checked + label
{
/* checked state */
}

对于 javascript，您可以将类添加到标签中以显示状态。此外，明智的做法是使用以下功能:

$('label[for]').live('click', function(e){
$('#' + $(this).attr('for') ).click();
return false;
});

编辑以修改 #checkboxID样式

小开

我正在编写一个手机应用程序，复选框的大小、外观等各不相同。 所以我自己做了一个简单的复选框:

首先是 HTML 代码:

<span role="checkbox"/>

然后是 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);
}

为了切换复选框状态，我使用了 JQuery:

CLICKEVENT='touchend';
function createCheckboxes()
{
$('[role=checkbox]').bind(CLICKEVENT,function()
{
$(this).toggleClass('checked');
});
}

但是没有它也可以很容易做到。

希望能有所帮助！

小开
最佳答案

如果这可以帮助任何人，这里有一个简单的 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" />

小开

实际上有一种方法可以让它们变得更大，复选框就像其他任何东西一样(甚至像 facebook 按钮这样的 iframe)。

用“放大”元素包装它们:

.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>

它可能看起来有点“重新缩放”，但它的工作原理。

当然，您可以让 div float: left 并将标签放在它旁边，float: left 也可以。

小开

我尝试改变 padding和 margin，以及 width和 height，然后最后发现，如果你只是增加规模，它将工作:

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

纯粹的现代2020年 只能用 CSS决定，没有模糊的缩放或不方便的转换。和滴答! =)

在 Firefox 和基于 Chromium 的浏览器中运行良好。

因此，您可以规则您的复选框纯粹 适应，只需设置父块的 font-size，它将随着文本增长！

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>
<label for="check3" style="font-size:150%"><input type="checkbox" id="check3" checked="checked" /> bigger checkbox </label>


提交答案