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

输入[= 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

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

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

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

这应该可以

input {
  width: 25px;
  height: 25px;
}

对我来说，火狐浏览器、Chrome浏览器、iPhone的火狐浏览器、Chrome浏览器和Safari浏览器至少都是如此。

问题是Firefox不听宽度和高度。把它拆了，你就可以走了。

输入(type =复选框){ 宽度:25 px; 高度:25 px; -moz-appearance:没有; ｝ <label><input type="checkbox"> Test</label>

我发现这个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>

默认情况下，复选框的外观似乎是固定的。但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: