我想做一个复选框，只是稍大一点，并查看37Signals Basecamp的源代码，以找到以下解决方案-

您可以更改字体大小，使复选框略大:

font-size: x-large;

然后，你可以正确对齐复选框，这样做:

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

我想做一个复选框，只是稍大一点，并查看37Signals Basecamp的源代码，以找到以下解决方案-

您可以更改字体大小，使复选框略大:

font-size: x-large;

然后，你可以正确对齐复选框，这样做:

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

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

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

.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为我工作，只需要几行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: "\2713"; /* check mark */
}

正如这篇文章中提到的，缩放属性似乎在Firefox上不起作用，并且转换可能会导致不希望看到的效果。

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

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

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

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