css如何自定义checkbox样式?本文给大家介绍css实现修改原生checkbox样式,自定义checkbox样式的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
先看看效果

原理
1.利用CSS3属性 appearance。
该属性(强制)更改(改变)默认(原生)样式。
立即学习“前端免费学习笔记(深入)”;
Firefox 支持替代的 -moz-appearance 属性;Safari 和 Chrome 支持替代的 -webkit-appearance 属性;IE不支持该属性。
所以可以利用该属性取消checkbox的原生样式。
2.利用:checked选择器
当checkbox被选中的时候改变样式。
3. :after选择器 + content属性
:after选择器向元素之后插入内容。
我们再利用text-aligen和line-height让内容正居中就行了。
实例代码:
checkbox
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 CSS视频教程!
相关推荐:










