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

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>

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

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

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

font-size: x-large;

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

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

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

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

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

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

源