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

113

大多数浏览器中呈现的标准复选框很小，即使使用较大的字体也不会增加尺寸。与浏览器无关的显示较大复选框的最佳方法是什么？

html css checkbox

— 小马托尼
source

143

万一这可以帮助任何人，这里提供了简单的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" />

展开摘要

— 保罗
source

@GabrielW是的。只需使用其他的等效项即可

— taylorcressy 2014年

@taylorcressy除了IE（也包括IE 11）之外，caniuse.com /＃search = Appearance-但在其他浏览器上工作正常。谢谢！

— CodeBrauer 2014年

16

如果里面也有一个滴答声，那将是很好的:)

— 罗伯特·金（Robert King）

@Paul：感谢您的分享。我想知道您如何处理选中标记。将背景设置为某种颜色后，该框内的白色复选标记将不再可见。有一个简单的解决方案吗？我试过在：before中添加一个html实体进行检查，但是想知道是否还有其他选择

— PBandJen

1

我用于检查的背景颜色较暗的颜色，它不是那么糟糕没有一个“检查”

— JR Lawhorne

47

实际上，有一种方法可以使它们更大，就像其他任何复选框一样，也可以是复选框（甚至是iframe之类的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。

— 弗洛里安
source

1

请注意，在Firefox（版本36）上，这将导致外观非常模糊。不过，它在Chrome中可以很好地扩展。演示：jsfiddle.net/tzp858j3

— 吉

有没有更好的解决方案，看起来似乎没有规模？

— basZero

3

不能zoom: 2和transform: scale(2)直接应用到复选框？为什么需要包装纸？

— Atav32

谢谢！看来您的代码将更多的浏览器考虑在内，因此我可以进行测试，但是它可以在我尝试过的所有内容上正常工作。在我的I-phone上特别好，复选框几乎变成了点！顺便说一句，您可以在此代码片段置于“ 2”的位置放一个较小的分数比例（如1.5），并选择一个中等大小的复选框。

— 兰迪

26

试试这个CSS

input[type=checkbox] {width:100px; height:100px;}

— 柯林·怀特
source

2

并非完全跨浏览器（最好在HTML中设置一个类并在CSS中使用类选择器），但这可能是比我更好的解决方案。+1

— 哈曼（Harmen）2010年

1

我出于示例目的使用宽度和高度。可能是Harmen和我的解决方案的结合，因为您可能需要比CSS合理提供的样式更多的样式。

— Collin White

6

这仅适用于某些浏览器，而不适用于许多现代浏览器。

— RJ Owen

1

此功能适用于iPad的Safari浏览器，其中的复选框通常需要更大才能使用户更容易点击。

— user3032973

3

主要限制是，它根本无法在Firefox（从Firefox 36开始）中运行，并且实际上看起来非常不自然（复选框为常规大小，但其周围的填充填充了100 x 100px的区域。）

— 2014年

5

我尝试更改paddingand margin和well以及widthand height，然后最终发现，只要增加比例就可以使用：

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

— 贾斯汀
source

1

这是一个技巧，可以在最新的浏览器（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样式

— zzzzBov
source

有关此技术的完整源代码的链接，请参见stackoverflow.com/a/3772914/190135

— AlexChaffee 2012年

1

我正在写一个phonegap应用程序，并且复选框的大小，外观等不同。所以我做了一个自己的简单复选框：

首先是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');
    });
}

但是没有它就可以轻松完成...

希望能对您有所帮助！

— Wesamot
source

1

纯现代2020 CSS唯一决策，无需模糊缩放或不方便的变换。并打勾！=）

在基于Firefox和Chromium的浏览器中效果很好。

因此，您可以仅通过设置父块的规则来完全控制ADAPTIVE复选框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>

展开摘要

— 烈焰风暴
source