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

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

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

我的理解是，跨浏览器操作一点也不容易。您可以使用图像、javascript和隐藏的输入字段构建自己的实现，而不是尝试操作复选框控件。我假设这类似于niceforms(来自上面Staicu lonut的回答)，但实现起来并不特别困难。我相信jQuery也有一个插件允许这种自定义行为(如果我能找到的话，我会在这里寻找链接和帖子)。

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

我想说的是:

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

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

这里的主要兴趣是:

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

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

你可以在Safari中让复选框变大——这通常是对常规方法的抵抗——使用这个属性:

源

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

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