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

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

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

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

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

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

默认情况下，复选框的外观似乎是固定的。但Worthy7指出，这可以补救使用CSS外观属性。它将使复选框完全为空，因此您可以定义自己的外观。这样做的好处是:您可以使用现有的HTML代码。缺点:这是一项实验技术。Edge (legacy)和IE不使用自定义样式。

下面是需要的CSS样式:

input[type=checkbox] { width: 14mm; -webkit-appearance: none; -moz-appearance: none; height: 14mm; border: 0.1mm solid black; } input[type=checkbox]:checked { background-color: lightblue; } input[type=checkbox]:checked:after { margin-left: 4.3mm; margin-top: -0.4mm; width: 3mm; height: 10mm; border: solid white; border-width: 0 2mm 2mm 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>

截图:

铬:

Firefox:

优势:

边缘(遗留):

IE:

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

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

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>