是否可以跨浏览器使用CSS或HTML设置复选框的大小?
width和size在IE6+中有效,但在Firefox中无效,在Firefox中,即使我设置较小的大小,复选框仍然保持16x16。
是否可以跨浏览器使用CSS或HTML设置复选框的大小?
width和size在IE6+中有效,但在Firefox中无效,在Firefox中,即使我设置较小的大小,复选框仍然保持16x16。
当前回答
这应该可以
input {
width: 25px;
height: 25px;
}
对我来说,火狐浏览器、Chrome浏览器、iPhone的火狐浏览器、Chrome浏览器和Safari浏览器至少都是如此。
其他回答
我的理解是,跨浏览器操作一点也不容易。您可以使用图像、javascript和隐藏的输入字段构建自己的实现,而不是尝试操作复选框控件。我假设这类似于niceforms(来自上面Staicu lonut的回答),但实现起来并不特别困难。我相信jQuery也有一个插件允许这种自定义行为(如果我能找到的话,我会在这里寻找链接和帖子)。
这应该可以
input {
width: 25px;
height: 25px;
}
对我来说,火狐浏览器、Chrome浏览器、iPhone的火狐浏览器、Chrome浏览器和Safari浏览器至少都是如此。
您可以在下面的代码中更改高度和宽度
.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 >
我发现这个css库非常有用: https://lokesh-coder.github.io/pretty-checkbox/
或者,你也可以像@Sharcoux发的帖子那样,用同样的基本概念自己动手。它基本上是:
隐藏正常的复选框(不透明度为0,放在它应该去的地方) 添加一个基于css的假复选框 对选中的样式使用input:checked~div标签 确保你的<label>是可点击的使用for=yourinputID
.pretty { position: relative; margin: 1em; } .pretty input { position: absolute; left: 0; top: 0; min-width: 1em; width: 100%; height: 100%; z-index: 2; opacity: 0; margin: 0; padding: 0; cursor: pointer; } .pretty-inner { box-sizing: border-box; position: relative; } .pretty-inner label { position: initial; display: inline-block; font-weight: 400; margin: 0; text-indent: 1.5em; min-width: calc(1em + 2px); } .pretty-inner label:after, .pretty-inner label:before { content: ''; width: calc(1em + 2px); height: calc(1em + 2px); display: block; box-sizing: border-box; border-radius: 0; border: 1px solid transparent; z-index: 0; position: absolute; left: 0; top: 0; background-color: transparent; } .pretty-inner label:before { border-color: #bdc3c7; } .pretty input:checked~.pretty-inner label:after { background-color: #00bb82; width: calc(1em - 6px); height: calc(1em - 6px); top: 4px; left: 4px; } /* Add checkmark character style */ .pretty input:checked~.pretty-inner.checkmark:after { content: '\2713'; color: #fff; position: absolute; font-size: 0.65em; left: 6px; top: 3px; } body { font-size: 20px; font-family: sans-serif; } <div class="pretty"> <input type="checkbox" id="demo" name="demo"> <div class="pretty-inner"><label for="demo">I agree.</label></div> </div> <div class="pretty"> <input type="checkbox" id="demo" name="demo"> <div class="pretty-inner checkmark"><label for="demo">Please check the box.</label></div> </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