Html 如何制作宽度和高度为 16px 的复选框?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7856748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a checkbox with a Width & Height of 16px?
提问by AnApprentice
I want to have a large checkbox with a width of 16px
and a height of 16px
. I don't want to have to use a JavaScript plugin. Can this be done with modern CSS?
我想要一个大复选框,宽度16px
为16px
. 我不想使用 JavaScript 插件。这可以用现代 CSS 来完成吗?
回答by Alexey Ivanov
You can disable default checkbox appearance with appearanceproperty in css and after that style it any way you like with borders, background-images and etc:
您可以在 css 中使用外观属性禁用默认复选框外观,然后使用边框、背景图像等以任何您喜欢的方式对其进行样式设置:
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
To style hover and checked statuses use: :hover, :checked and :hover:checked pseudoclasses.
要设置悬停和选中状态的样式,请使用::hover、:checked 和 :hover:checked 伪类。
Another way is to use transformproperty to enlarge it:
另一种方法是使用变换属性来放大它:
-webkit-transform: scale(1.6,1.6);
-moz-transform: scale(1.6,1.6);
-o-transform: scale(1.6,1.6);