欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

自定义checkbox样式

发布时间：2023/12/2 34 豆豆
生活随笔 收集整理的这篇文章主要介绍了 自定义checkbox样式 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

通过选中时添加背景图片自定义CheckBox样式

效果：

CSS样式：

 

<style type="text/css>label {width: 10%;display: flex;display: -webkit-flex;display: -moz-flex;flex-direction: row;justify-content: center;align-items: center;}label input[type=checkbox] {width: 15px;height: 15px;overflow: hidden;background: #fff;appearance: none;-webkit-appearance: none;border: 1px solid #808080;outline: none;margin-right: 5px;margin-top: 0;}input[type=checkbox]:checked {appearance: none;-webkit-appearance: none;background-image: url(./Images/btn-blue_03.png);background-position: center;background-repeat: no-repeat;background-size: 100%;border-radius: 4px;border: 0;overflow: hidden;}</style>

 

　　

 

html结构： <body><label><input type="checkbox" name="type" checked><span>one</span></label><label><input type="checkbox" name="type"><span>two</span></label> </body>　

　　

　

 


更多专业前端知识，请上 【猿2048】www.mk2048.com

总结

以上是生活随笔为你收集整理的自定义checkbox样式的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。