是否可以跨浏览器使用CSS或HTML设置复选框的大小?

width和size在IE6+中有效,但在Firefox中无效,在Firefox中,即使我设置较小的大小,复选框仍然保持16x16。


当前回答

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

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

font-size: x-large;

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

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

其他回答

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

默认情况下,复选框的外观似乎是固定的。但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:

我想说的是:

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

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

这里的主要兴趣是:

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

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

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

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

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