如果下载的源码需要作者授权,请更换源码。

本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于如何自定义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让内容正居中就行了。

源码



DOCTYPEhtmlhtmlheadmetacharset=UTF-8titlecheckbox/titlestyleinput{width:16px;height:16px;margin-top:0;background-color:#fff;border:1pxsolid#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:1pxsolid#43adea;}input:after{content?

}/style/headbodyinputtype=checkboxinputtype=checkbox/body/html

以上就是对如何自定义checkbox样式?

附代码的全部介绍,如果您想了解更多有关CSS3视频教程,请关注PHP中文网。

AD:【5G云技术交流群】入群打赏4。

8,打赏备注QQ号,核对后进群

0个人已赞赞一个收藏(0)打赏

入群打赏请备注QQ,购买打赏请备注邮箱