是否可以跨浏览器使用CSS或HTML设置复选框的大小?
width和size在IE6+中有效,但在Firefox中无效,在Firefox中,即使我设置较小的大小,复选框仍然保持16x16。
是否可以跨浏览器使用CSS或HTML设置复选框的大小?
width和size在IE6+中有效,但在Firefox中无效,在Firefox中,即使我设置较小的大小,复选框仍然保持16x16。
当前回答
它有点丑(由于缩放),但它适用于大多数更新的浏览器:
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>
其他回答
我的理解是,跨浏览器操作一点也不容易。您可以使用图像、javascript和隐藏的输入字段构建自己的实现,而不是尝试操作复选框控件。我假设这类似于niceforms(来自上面Staicu lonut的回答),但实现起来并不特别困难。我相信jQuery也有一个插件允许这种自定义行为(如果我能找到的话,我会在这里寻找链接和帖子)。
你可以在Safari中让复选框变大——这通常是对常规方法的抵抗——使用这个属性:
源
问题是Firefox不听宽度和高度。把它拆了,你就可以走了。
输入(type =复选框){ 宽度:25 px; 高度:25 px; -moz-appearance:没有; } <label><input type="checkbox"> Test</label>
这应该可以
input {
width: 25px;
height: 25px;
}
对我来说,火狐浏览器、Chrome浏览器、iPhone的火狐浏览器、Chrome浏览器和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>