时间：2021-07-01 10:21:17 帮助过：40人阅读
修改原生checkbox样式。
效果
原理
1.利用CSS3属性 appearance。
该属性（强制）更改（改变）默认（原生）样式。
Firefox 支持替代的 -moz-appearance 属性；Safari 和 Chrome 支持替代的 -webkit-appearance 属性；IE不支持该属性。
所以可以利用该属性取消checkbox的原生样式。
2.利用:checked选择器
当checkbox被选中的时候改变样式。
3. :after选择器 + content属性
:after选择器向元素之后插入内容。
我们再利用text-aligen和line-height让内容正居中就行了。
源码
- <!DOCTYPE html><html><head>
- <meta charset="UTF-8">
- <title>checkbox</title>
- <style>
- input {
- width: 16px;
- height: 16px;
- margin-top: 0;
- background-color: #fff;
- border: 1px solid #c9c9c9;
- border-radius: 2px;
- color: #fff;
- text-align: center;
- line-height: 15px;
- -webkit-appearance:none;
- -moz-appearance:none;
- -ms-appearance:none;
- -o-appearance:none;
- appearance:none;
- outline: none;
- }
- input:hover {
- border-color: #43adea;
- }
- input:checked {
- color: #fff;
- background-color: #43adea;
- border: 1px solid #43adea;
- }
- input:after {
- content: "✔";
- }
- </style></head><body>
- <input type="checkbox">
- <input type="checkbox"></body></html>
以上就是对如何自定义checkbox样式？附代码的全部介绍，如果您想了解更多有关CSS3视频教程，请关注PHP中文网。
以上就是如何自定义checkbox样式？附代码的详细内容，更多请关注Gxl网其它相关文章！