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

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>

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

我想说的是:

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

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

这里的主要兴趣是:

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

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

我认为最简单的解决方案是像一些用户建议的那样重新设置复选框的样式。下面的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上测试，应该适用于所有现代浏览器。只需根据需要更改属性(颜色、大小、底部、左侧等)。希望能有所帮助!

预览: http://jsfiddle.net/h4qka9td/

*,*:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } .switch { margin: 50px auto; position: relative; } .switch label { width: 100%; height: 100%; position: relative; display: block; } .switch input { top: 0; right: 0; bottom: 0; left: 0; opacity: 0; z-index: 100; position: absolute; width: 100%; height: 100%; cursor: pointer; } /* DEMO 3 */ .switch.demo3 { width: 180px; height: 50px; } .switch.demo3 label { display: block; width: 100%; height: 100%; background: #a5a39d; border-radius: 40px; box-shadow: inset 0 3px 8px 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.5); } .switch.demo3 label:after { content: ""; position: absolute; z-index: -1; top: -8px; right: -8px; bottom: -8px; left: -8px; border-radius: inherit; background: #ababab; background: -moz-linear-gradient(#f2f2f2, #ababab); background: -ms-linear-gradient(#f2f2f2, #ababab); background: -o-linear-gradient(#f2f2f2, #ababab); background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab)); background: -webkit-linear-gradient(#f2f2f2, #ababab); background: linear-gradient(#f2f2f2, #ababab); box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.25); } .switch.demo3 label:before { content: ""; position: absolute; z-index: -1; top: -18px; right: -18px; bottom: -18px; left: -18px; border-radius: inherit; background: #eee; background: -moz-linear-gradient(#e5e7e6, #eee); background: -ms-linear-gradient(#e5e7e6, #eee); background: -o-linear-gradient(#e5e7e6, #eee); background: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e7e6), to(#eee)); background: -webkit-linear-gradient(#e5e7e6, #eee); background: linear-gradient(#e5e7e6, #eee); box-shadow: 0 1px 0 rgba(255,255,255,0.5); -webkit-filter: blur(1px); -moz-filter: blur(1px); -ms-filter: blur(1px); -o-filter: blur(1px); filter: blur(1px); } .switch.demo3 label i { display: block; height: 100%; width: 60%; border-radius: inherit; background: silver; position: absolute; z-index: 2; right: 40%; top: 0; background: #b2ac9e; background: -moz-linear-gradient(#f7f2f6, #b2ac9e); background: -ms-linear-gradient(#f7f2f6, #b2ac9e); background: -o-linear-gradient(#f7f2f6, #b2ac9e); background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e)); background: -webkit-linear-gradient(#f7f2f6, #b2ac9e); background: linear-gradient(#f7f2f6, #b2ac9e); box-shadow: inset 0 1px 0 white, 0 0 8px rgba(0,0,0,0.3), 0 5px 5px rgba(0,0,0,0.2); } .switch.demo3 label i:after { content: ""; position: absolute; left: 15%; top: 25%; width: 70%; height: 50%; background: #d2cbc3; background: -moz-linear-gradient(#cbc7bc, #d2cbc3); background: -ms-linear-gradient(#cbc7bc, #d2cbc3); background: -o-linear-gradient(#cbc7bc, #d2cbc3); background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3)); background: -webkit-linear-gradient(#cbc7bc, #d2cbc3); background: linear-gradient(#cbc7bc, #d2cbc3); border-radius: inherit; } .switch.demo3 label i:before { content: "off"; text-transform: uppercase; font-style: normal; font-weight: bold; color: rgba(0,0,0,0.4); text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e; font-family: Helvetica, Arial, sans-serif; font-size: 24px; position: absolute; top: 50%; margin-top: -12px; right: -50%; } .switch.demo3 input:checked ~ label { background: #9abb82; } .switch.demo3 input:checked ~ label i { right: -1%; } .switch.demo3 input:checked ~ label i:before { content: "on"; right: 115%; color: #82a06a; text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659; } <div class="switch demo3"> <input type="checkbox"> <label><i></i> </label> </div> <div class="switch demo3"> <input type="checkbox" checked> <label><i></i> </label> </div>