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

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

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

.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 >

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

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

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

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

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