CSS3 checkbox美化效果

发布时间:2020-05-22 02:24:21发布者:admin浏览数:

本章节分享一段代码实例,它利用css3对checkbox复选框进行了简单的美化效果。

点击复选框的时候有动画过渡效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.checkbox-value { position: relative; height: 30px; line-height: 30px; padding-left: 30px; overflow: hidden; display:block; cursor:pointer;}.checkbox-value:before { transition: all 0.5s ease-in; content: ""; width: 20px; height: 20px; position: absolute; border: 2px solid rgb(0,0,0); border-radius: 4px; left: 0; top: 5px; background: #fff; overflow: hidden; cursor: pointer;}.checkbox-value:after { border: none; transition: all 0.2s ease-in;}.checkboxcon { position: relative; height: 30px; overflow: hidden; box-sizing: border-box; display: table; vertical-align: middle;}.checkbox { display: inline-block; width: 0; height: 0; opacity: 0; *width: 20px; *height: 20px; position: absolute; top: 5px;}.checkboxcon input[type=checkbox]:checked + .checkbox-value:before { transition: all 0.5s ease-in; content: ""; width: 20px; height: 20px; position: absolute; border: 2px solid rgba(0,0,0,0.5); border-radius: 4px; left: 0; top: 5px; background: #000; overflow: hidden; cursor: pointer;}.checkboxcon input[type=checkbox]:checked + .checkbox-value:after { cursor: pointer; margin-top: 5px; margin-left: 8px; content: ""; width: 4px; height: 9px; border-right: 1px solid #fff; border-bottom: 1px solid #FFF; transform: rotate(45deg); position: absolute; left: 0; top: 5px; transition: all 0.2s ease-out;}</style><script type="text/javascript"></script></head><body> <label class="checkboxcon"> <input class="checkbox" type="checkbox" /> <span class="checkbox-value">请选择</span> </label></body></html>

上面的代码非常简单,更多内容可以参阅相关阅读。

相关阅读:

(1).:before参阅CSS E:before/E::before伪对象选择符一章节。

(2).transition参阅CSS3 transition一章节。

(3).border-radius参阅CSS3 border-radius圆角一章节。

(4).box-sizing参阅CSS3 box-sizing一章节。

(5).transform参阅CSS3 transform一章节。

(6).label标签参阅<label>标签的for属性一章节。

(7).[type=checkbox]参阅CSS E[att="val"]属性选择符一章节。

  网站建设分类
程序开发 |  系统教程 |  软件应用 |  图形图像 |  网络应用 |  站长教程 |  网站建设 |  视频教程 |  硬件维护 |  IT资讯 |  中国it动力网
本站发布的系统与软件仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持购买微软正版软件!
如侵犯到您的权益,请及时通知我们,我们会及时处理。
Copyright @ 2019 中国it动力网 网站导航