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

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

font-size: x-large;

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

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

您可以在下面的代码中更改高度和宽度

.checkmark { 位置:绝对的; 上图:0; 左:0; 高度:20 px; 宽度:20 px; border - radius: 5 px; 边框:1px实体#ff7e02; ｝ < div class = "检查" > <标签类= " container1 " >建筑/景观 <input type="checkbox" checked="checked"> < span class = "勾" > < / span > < / >标签 < / div >

我的声誉有点太低，不能发表评论，但我对上面的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>

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

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

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

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