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>

我的声誉有点太低，不能发表评论，但我对上面的Jack Miller的代码做了修改，以使它在你勾选和取消勾选时不改变大小。这给我带来了文本对齐问题。

input[type=checkbox] { width: 17px; -webkit-appearance: none; -moz-appearance: none; height: 17px; border: 1px solid black; } input[type=checkbox]:checked { background-color: #F58027; } input[type=checkbox]:checked:after { margin-left: 4px; margin-top: -1px; width: 4px; height: 12px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); content: ""; display: inline-block; } input[type=checkbox]:after { margin-left: 4px; margin-top: -1px; width: 4px; height: 12px; border: solid white; border-width: 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>

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

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>

使用这个CSS代码

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  transform: scale(1.5);
  padding: 10px;
}

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

下面是需要的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>

截图:

铬:

Firefox:

优势:

边缘(遗留):

IE:

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

输入[= 1]{型 用金币:规模(1 . 5); 的 <标签><输入类型=“checkbox”>测试</标签>

兼容性:

即:10 + FF: 16 + 铬:36 + Safari: 9 + 歌剧:23 + iOS Safari: 9.2+ Chrome for Android: 51+

外观:

Chrome 58(2017年5月)，Windows 10