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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:12:19  来源:igfitidea点击:

How can I make a checkbox with a Width & Height of 16px?

htmlcss

提问by AnApprentice

I want to have a large checkbox with a width of 16pxand a height of 16px. I don't want to have to use a JavaScript plugin. Can this be done with modern CSS?

我想要一个大复选框,宽度16px16px. 我不想使用 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);