Html 我可以使用 CSS 更改复选框大小吗？

Can I change the checkbox size using CSS?

提问by RaGE

Is it possible to set the size of a checkbox using CSS or HTML across browsers?

是否可以跨浏览器使用 CSS 或 HTML 设置复选框的大小？

widthand sizework in IE6+, but not with Firefox, where the checkbox stays 16x16 even if I set a smaller size.

width并size在 IE6+ 中工作，但不适用于 Firefox，即使我设置了较小的尺寸，复选框仍保持 16x16。

回答by jdw

It's a little ugly (due to the scaling up), but it works on most newer browsers:

它有点难看（由于扩展），但它适用于大多数较新的浏览器：

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 */
  transform: scale(2);
  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>

回答by Fellow Stranger

Working solution for all modern browsers.

适用于所有现代浏览器的工作解决方案。

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

<label><input type="checkbox"> Test</label>

---

---

Compatibility:

兼容性：

• IE: 10+
• FF: 16+
• Chrome: 36+
• Safari: 9+
• Opera: 23+
• iOS Safari: 9.2+
• Chrome for Android: 51+

• 浏览器：10+
• 外援：16+
• 铬：36+
• Safari：9+
• 歌剧：23+
• iOS Safari：9.2+
• 安卓版 Chrome：51+

---

---

Appearance:

外貌：

• Chrome 58 (May 2017), Windows 10

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

回答by Luiz

An easy solution is use the property zoom:

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

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

<input type="checkbox" />

回答by ViliusL

2020 version- using pseudo-elements, size depends on font size.

2020 版本- 使用伪元素，大小取决于字体大小。

Default checkbox/radio is rendered outside of screen, but CSS creates virtual elements very similar to default elements. Supports all browsers, no blur. Size depends on font size. Keyboard actions (space, tabs) are also supported.

默认复选框/单选框在屏幕之外呈现，但 CSS 创建的虚拟元素与默认元素非常相似。支持所有浏览器，无模糊。大小取决于字体大小。还支持键盘操作（空格、制表符）。

https://jsfiddle.net/ohf7nmzy/2/

https://jsfiddle.net/ohf7nmzy/2/

body{
 padding:0 20px;
}
.big{
 font-size: 50px;
}

/* CSS below will force radio/checkbox size be same as font size */
label{
 position: relative;
 line-height: 1.4;
}
/* radio */
input[type=radio]{
 width: 1em;
 font-size: inherit;
 margin: 0;
 transform: translateX(-9999px);
}
input[type=radio] + label:before{
 position: absolute;
 content: '';
 left: -1.3em;
 top: 0;
 width: 1em;
 height: 1em;
 margin: 0;
 border:none;
 border-radius: 50%;
 background-color: #bbbbbb;
}
input[type=radio] + label:after{
 position: absolute;
 content: '';
 left: -1.3em;
 top: 0;
 width: 1em;
 height: 1em;
 margin: 0;
 border: none;
 background-color: white;
 border-radius: 50%;
 transform: scale(0.8);
}
/*checked*/
input[type=radio]:checked + label:before{
 position:absolute;
 content:'';
 left: -1.3em;
 top: 0;
 width: 1em;
 height: 1em;
 margin: 0;
 border: none;
 background-color: #3b88fd;
}
input[type=radio]:checked + label:after{
 position: absolute;
 content: '';
 left: -1.3em;
 top: 0;
 width: 1em;
 height: 1em;
 margin: 0;
 border: none;
 background-color: white;
 border-radius: 50%;
 transform: scale(0.3);
}
/*focused*/
input[type=radio]:focus + label:before{
 border: 0.2em solid #8eb9fb;
 margin-top: -0.2em;
 margin-left: -0.2em;
 box-shadow: 0 0 0.3em #3b88fd;
}


/*checkbox/*/
input[type=checkbox]{
 width: 1em;
 font-size: inherit;
 margin: 0;
 transform: translateX(-9999px);
}
input[type=checkbox] + label:before{
 position: absolute;
 content: '';
 left: -1.3em;
 top: 0;
 width: 1em;
 height: 1em;
 margin: 0;
 border:none;
 border-radius: 10%;
 background-color: #bbbbbb;
}
input[type=checkbox] + label:after{
 position: absolute;
 content: '';
 left: -1.3em;
 top: 0;
 width: 1em;
 height: 1em;
 margin: 0;
 border: none;
 background-color: white;
 border-radius: 10%;
 transform: scale(0.8);
}
/*checked*/
input[type=checkbox]:checked + label:before{
 position:absolute;
 content:'';
 left: -1.3em;
 top: 0;
 width: 1em;
 height: 1em;
 margin: 0;
 border: none;
 background-color: #3b88fd;
}
input[type=checkbox]:checked + label:after{
 position: absolute;
 content: "13";
 left: -1.3em;
 top: 0;
 width: 1em;
 height: 1em;
 margin: 0;
 border: none;
 background-color: #3b88fd;
 border-radius: 10%;
 color: white;
 text-align: center;
 line-height: 1;
}
/*focused*/
input[type=checkbox]:focus + label:before{
 border: 0.1em solid #8eb9fb;
 margin-top: -0.1em;
 margin-left: -0.1em;
 box-shadow: 0 0 0.2em #3b88fd;
}

<input type="checkbox" name="checkbox_1" id="ee" checked /> 
<label for="ee">Checkbox small</label>

<br />

<input type="checkbox" name="checkbox_2" id="ff" /> 
<label for="ff">Checkbox small</label>

<hr />

<div class="big">
 <input type="checkbox" name="checkbox_3" id="gg" checked /> 
 <label for="gg">Checkbox big</label>

 <br />

 <input type="checkbox" name="checkbox_4" id="hh" /> 
 <label for="hh">Checkbox big</label>
</div>


<hr />


<input type="radio" name="radio_1" id="aa" value="1" checked /> 
<label for="aa">Radio small</label>

<br />

<input type="radio" name="radio_1" id="bb" value="2" /> 
<label for="bb">Radio small</label>

<hr />

<div class="big">
 <input type="radio" name="radio_2" id="cc" value="1" checked /> 
 <label for="cc">Radio big</label>

 <br />

 <input type="radio" name="radio_2" id="dd" value="2" /> 
 <label for="dd">Radio big</label>
</div>

2017 version- using zoom or scale

2017 版本- 使用缩放或缩放

Browser will use non-standard zoomfeature if it is supported (nice quality) or standard transform: scale(blurry).

zoom如果支持（质量好）或标准transform: scale（模糊），浏览器将使用非标准功能。

Scaling works on all browsers, but it will be blurry on Firefox and Safari.

缩放适用于所有浏览器，但在 Firefox 和 Safari 上会模糊。

https://jsfiddle.net/ksvx2txb/11/

https://jsfiddle.net/ksvx2txb/11/

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

回答by Sharcoux

I just came out with this:

我只是想出了这个：

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>

Of course, thanks to this, you can change the value of contentto your needs and use an image if you wish or use another font...

当然，多亏了这一点，您可以根据content需要更改 的值，并根据需要使用图像或使用其他字体...

The main interest here is that:

这里的主要兴趣是：

1. The checkbox size stays proportional to the text size

2. You can control the aspect, the color, the size of the checkbox

3. No extra HTML needed !

4. Only 3 lines of CSS needed (the last one is just to give you ideas)

1. 复选框大小与文本大小成正比

2. 您可以控制复选框的纵横比、颜色、大小

3. 不需要额外的 HTML！

4. 只需要3行CSS（最后一行只是给你出主意）

Edit: As pointed out in the comment, the checkbox won't be accessible by key navigation. You should probably add tabindex=0as a property for your label to make it focusable.

编辑：正如评论中所指出的，该复选框将无法通过按键导航访问。您可能应该tabindex=0为标签添加一个属性以使其可聚焦。

回答by UniMe

Preview:
http://jsfiddle.net/h4qka9td/

预览：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>

回答by Hyman Miller

The appearance of checkboxes seems to be fixed by default. But as pointed out by Worthy7 this can be remedied using CSS appearanceproperty. It will make checkboxes completely empty, so you can define your own appearance. What is nice about this: You can use your existing HTML code. Downside: It is experimental technology. Edge and IE do not use the custom style.

默认情况下，复选框的外观似乎是固定的。但正如 Worthy7 所指出的，这可以使用CSSappearance属性来补救。它将使复选框完全为空，因此您可以定义自己的外观。这样做的好处是：您可以使用现有的 HTML 代码。缺点：是实验技术。Edge 和 IE 不使用自定义样式。

Here are the needed CSS styles:

以下是所需的 CSS 样式：

input[type=checkbox] {
    width: 14mm;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 14mm;
    border: 0.1mm solid black;
}

input[type=checkbox]:checked {
    background-color: lightblue;
}

input[type=checkbox]:checked:after {
    margin-left: 4.3mm;
    margin-top: -0.4mm;
    width: 3mm;
    height: 10mm;
    border: solid white;
    border-width: 0 2mm 2mm 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    display: inline-block;
}

<label><input type="checkbox"> Test</label>

Screenshots:

截图：

Chrome:

铬合金：

Firefox:

火狐：

Edge:

边缘：

IE:

IE：

回答by Justin

I was looking to make a checkbox that was just a little bit larger and looked at the source code for 37Signals Basecamp to find the following solution-

我正在寻找一个稍微大一点的复选框，并查看了 37Signals Basecamp 的源代码以找到以下解决方案-

You can change the font size to make the checkbox slightly larger:

您可以更改字体大小以使复选框稍大：

font-size: x-large;

Then, you can align the checkbox properly by doing:

然后，您可以通过执行以下操作正确对齐复选框：

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

回答by JCdotNET

I think the simplest solution is re-style the checkbox as some users suggest. The CSS below is working for me, only requires a few lines of CSS, and answers the OP question:

我认为最简单的解决方案是按照一些用户的建议重新设置复选框的样式。下面的 CSS 对我有用，只需要几行 CSS，并回答 OP 问题：

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: middle;
    width: 14px; 
    height: 14px;
    font-size: 14px;
    background-color: #eee;
}

input[type=checkbox]:checked:after {
    position: relative;
    bottom: 3px;
    left: 1px;
    color: blue;
    content: "13"; /* check mark */
}

As mentioned in this post, the zoom property seems not to work on Firefox, and transforms may cause undesired effects.

正如这篇文章中提到的，zoom 属性在 Firefox 上似乎不起作用，并且转换可能会导致不良影响。

Tested on Chrome and Firefox, should work for all modern browsers. Just change the properties (colors, size, bottom, left, etc.) to your needs. Hope it helps!

在 Chrome 和 Firefox 上测试，应该适用于所有现代浏览器。只需根据您的需要更改属性（颜色、大小、底部、左侧等）。希望能帮助到你！

回答by Avi Flax

You can make checkboxes larger in Safari — which is generally resistant to the usual approaches — with this attribute: -webkit-transform: scale(1.3, 1.3);

您可以使用以下属性在 Safari 中使复选框变大（这通常对通常的方法有抵抗力）： -webkit-transform: scale(1.3, 1.3);

Source

来源