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

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

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: "\2713"; 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版-使用缩放或缩放

浏览器将使用非标准缩放功能，如果它是支持的(不错的质量)或标准转换:缩放(模糊的Safari)作为后备。

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>

我想说的是:

输入(type = "复选框"]{显示:没有;} Input [type="checkbox"] + label:before {content:"㈠";} 输入:勾选+标签:前面{内容:“☑”;} 标签:悬停{颜色:蓝色;} <input id="check" type="checkbox" /><label for="check"> checkbox </label>

当然，多亏了这一点，您可以根据需要更改内容的值，如果您愿意，可以使用图像或使用另一种字体……

这里的主要兴趣是:

复选框大小与文本大小成比例 你可以控制方面，颜色，复选框的大小 不需要额外的HTML ! 只需要3行CSS(最后一行只是给你一些想法)

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

一个简单的解决方案是使用属性缩放:

输入[类型=“复选框”] { 变焦：1.5; } <输入类型=“复选框” />

它有点丑(由于缩放)，但它适用于大多数更新的浏览器:

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>

其他答案显示了一个像素的复选框，而我想要一些漂亮的东西。 结果如下所示:

尽管这个版本更复杂，但我认为值得一试。

.checkbox-list__item { position: relative; padding: 10px 0; display: block; cursor: pointer; margin: 0 0 0 34px; border-bottom: 1px solid #b4bcc2; } .checkbox-list__item: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; } .checkbox-list__check: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; } input[type="checkbox"]:checked ~ .checkbox-list__check { border-color: #5bc0de; } input[type="checkbox"]:checked ~ .checkbox-list__check:before { background-color: #5bc0de; } <label class="checkbox-list__item"> <input class="checkbox_buttons" type="checkbox" checked="checked" style="display: none;"> <div class="checkbox-list__check"></div> </label>

JSFiddle: https://jsfiddle.net/asbd4hpr/

我发现这个css库非常有用: https://lokesh-coder.github.io/pretty-checkbox/

或者，你也可以像@Sharcoux发的帖子那样，用同样的基本概念自己动手。它基本上是:

隐藏正常的复选框(不透明度为0，放在它应该去的地方) 添加一个基于css的假复选框 对选中的样式使用input:checked~div标签 确保你的<label>是可点击的使用for=yourinputID

.pretty { position: relative; margin: 1em; } .pretty input { position: absolute; left: 0; top: 0; min-width: 1em; width: 100%; height: 100%; z-index: 2; opacity: 0; margin: 0; padding: 0; cursor: pointer; } .pretty-inner { box-sizing: border-box; position: relative; } .pretty-inner label { position: initial; display: inline-block; font-weight: 400; margin: 0; text-indent: 1.5em; min-width: calc(1em + 2px); } .pretty-inner label:after, .pretty-inner label:before { content: ''; width: calc(1em + 2px); height: calc(1em + 2px); display: block; box-sizing: border-box; border-radius: 0; border: 1px solid transparent; z-index: 0; position: absolute; left: 0; top: 0; background-color: transparent; } .pretty-inner label:before { border-color: #bdc3c7; } .pretty input:checked~.pretty-inner label:after { background-color: #00bb82; width: calc(1em - 6px); height: calc(1em - 6px); top: 4px; left: 4px; } /* Add checkmark character style */ .pretty input:checked~.pretty-inner.checkmark:after { content: '\2713'; color: #fff; position: absolute; font-size: 0.65em; left: 6px; top: 3px; } body { font-size: 20px; font-family: sans-serif; } <div class="pretty"> <input type="checkbox" id="demo" name="demo"> <div class="pretty-inner"><label for="demo">I agree.</label></div> </div> <div class="pretty"> <input type="checkbox" id="demo" name="demo"> <div class="pretty-inner checkmark"><label for="demo">Please check the box.</label></div> </div>