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

源

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

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>

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

源

我想说的是:

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

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

这里的主要兴趣是:

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

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

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

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

font-size: x-large;

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

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

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

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