是否可以跨浏览器使用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>
其他回答
使用这个CSS代码
input[type=checkbox]
{
/* Double-sized Checkboxes */
-ms-transform: scale(1.5); /* IE */
-moz-transform: scale(1.5); /* FF */
-webkit-transform: scale(1.5); /* Safari and Chrome */
-o-transform: scale(1.5); /* Opera */
transform: scale(1.5);
padding: 10px;
}
您可以在下面的代码中更改高度和宽度
.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也有一个插件允许这种自定义行为(如果我能找到的话,我会在这里寻找链接和帖子)。
你可以在Safari中让复选框变大——这通常是对常规方法的抵抗——使用这个属性:
源
其他答案显示了一个像素的复选框,而我想要一些漂亮的东西。 结果如下所示:
尽管这个版本更复杂,但我认为值得一试。
.checkbox-list__item { position: relative; padding: 10px 0; display: block; cursor: pointer; margin: 0 0 0 34px; border-bottom: 1px solid #b4bcc2; } .checkbox-list__item:last-of-type { border-bottom: 0; } .checkbox-list__check { width: 18px; height: 18px; border: 3px solid #b4bcc2; position: absolute; left: -34px; top: 50%; margin-top: -12px; transition: border .3s ease; border-radius: 5px; } .checkbox-list__check:before { position: absolute; display: block; width: 18px; height: 22px; top: -2px; left: 0px; padding-left: 2px; background-color: transparent; transition: background-color .3s ease; content: '\2713'; font-family: initial; font-size: 19px; color: white; } input[type="checkbox"]:checked ~ .checkbox-list__check { border-color: #5bc0de; } input[type="checkbox"]:checked ~ .checkbox-list__check:before { background-color: #5bc0de; } <label class="checkbox-list__item"> <input class="checkbox_buttons" type="checkbox" checked="checked" style="display: none;"> <div class="checkbox-list__check"></div> </label>
JSFiddle: https://jsfiddle.net/asbd4hpr/