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

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>

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

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

我发现这个css库非常有用: https://lokesh-coder.github.io/pretty-checkbox/

或者，你也可以像@Sharcoux发的帖子那样，用同样的基本概念自己动手。它基本上是:

隐藏正常的复选框(不透明度为0，放在它应该去的地方) 添加一个基于css的假复选框 对选中的样式使用input:checked~div标签 确保你的<label>是可点击的使用for=yourinputID

.pretty { position: relative; margin: 1em; } .pretty input { position: absolute; left: 0; top: 0; min-width: 1em; width: 100%; height: 100%; z-index: 2; opacity: 0; margin: 0; padding: 0; cursor: pointer; } .pretty-inner { box-sizing: border-box; position: relative; } .pretty-inner label { position: initial; display: inline-block; font-weight: 400; margin: 0; text-indent: 1.5em; min-width: calc(1em + 2px); } .pretty-inner label:after, .pretty-inner label:before { content: ''; width: calc(1em + 2px); height: calc(1em + 2px); display: block; box-sizing: border-box; border-radius: 0; border: 1px solid transparent; z-index: 0; position: absolute; left: 0; top: 0; background-color: transparent; } .pretty-inner label:before { border-color: #bdc3c7; } .pretty input:checked~.pretty-inner label:after { background-color: #00bb82; width: calc(1em - 6px); height: calc(1em - 6px); top: 4px; left: 4px; } /* Add checkmark character style */ .pretty input:checked~.pretty-inner.checkmark:after { content: '\2713'; color: #fff; position: absolute; font-size: 0.65em; left: 6px; top: 3px; } body { font-size: 20px; font-family: sans-serif; } <div class="pretty"> <input type="checkbox" id="demo" name="demo"> <div class="pretty-inner"><label for="demo">I agree.</label></div> </div> <div class="pretty"> <input type="checkbox" id="demo" name="demo"> <div class="pretty-inner checkmark"><label for="demo">Please check the box.</label></div> </div>

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

源

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

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