CSS3模拟checkbox
来源:互联网 发布:office2016 mac 破解版 编辑:程序博客网 时间:2024/06/05 00:18
话说, 很久很久以前, 一直到不久前, 浏览器原生的checkbox(复选框)的样式大部分都不能改的, 在各个浏览器中的外观和行为都不一致, 这是一件相当让人蛋疼的事.
而在那个远古的蛮荒时代, 还生活着一种叫攻城师的生物, 每天被产品经理们强迫着, 想方设法让checkbox外观一统江湖, 苦不堪言.
在那个时代, css2和dom level2风行, 却对checkbox束手无策, 苦逼的攻城师们只能用JS来模拟checkbox的行为, 无辜的checkbox只能灰溜溜的束之高阁~.~
终于, 新时代还是来临了~攻城师的救世主——CSS3, 就像十字军东征一样, 所向披靡, 一往直前的来到我们面前, 依靠CSS3的得力大将(:checked 伪类 和 +,~ 选择符), 攻城师们终于可以抛开万恶(阿弥陀佛, 形势所逼, 勿怪勿怪…)的JS, 把checkbox迎接了回来.
================== 我是时间的分割线 ==================================
好了, 欢迎回到21世纪, ^_^. 话说我们这次还是模拟checkbox, 但是却没抛开checkbox, 利用:checked伪类和兄弟选择符(+/~), 用另外一个节点实现一个统一外观的checkbox, 而真正的checkbox这是用来保存选中态, 而且, 完全没用用到js哦亲~
嗯 , 其实上面的都是废话, 代码才是王道. 好, 见证奇迹的时刻~~
================== 我是华丽丽的代码分割线 ==============================
.checkbox{ display: none;}.checkbox + label{ width: 24px; height: 12px; display: inline-block; border: 1px solid #959595; margin: 3px; vertical-align: middle; border-radius: 4px; overflow: hidden; position: relative;}.checkbox + label span{ position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: -webkit-linear-gradient(top, #5071F5, #0E38E7); -webkit-transition: left 0.1s; border-radius: 2px 0 0 2px;}.checkbox ~ select{ vertical-align: middle; display: none;}.checkbox ~ .cate-1{ display: inline-block;}.checkbox:checked + label span{ left: 50%; border-radius: 0 2px 2px 0 ;}.checkbox:checked ~ .cate-2{ display: inline-block;}.checkbox:checked ~ .cate-1{ display: none;}
下面是html代码
<div class="content"> <span class="tips">请狠狠的点击我吧 --></span> <input id="imCheckbox" type="checkbox" class="checkbox"> <label for="imCheckbox"><span></span></label> <select class="cate-1"><option>我是分类1~啦啦啦啦</option></select> <select class="cate-2"><option>我是分类2~hohoho~~</option></select></div>
其实也就是多了一个label标签, 用label模拟checkbox, 然后把checkbox偷偷的藏起来. 当点击label的时候, 会触发checkbox的选中态的变更. 当checkbox被选中的时候, :checked伪类就会起作用. +选择符是用来选择跟着checkbox屁股的兄弟的, 也就是label. 而~选择符则是选择跟在他屁股后面的所有兄弟, 如select等.
如果你还不相信, 可以点击这里<<这里>>看活生生血淋淋的例子.
这里为了装逼, 我模拟了ios上面的checkbox, 带滑块的, 如果你只是要模拟原生的checkbox , 连label里面的span标签都可以省掉.
另外, 利用:checked和兄弟选择符还能做更多的事哦, 比如, checkbox没选中的时候显示一个下拉框, 没选中的时候显示另一个下拉框, 效果还是看例子吧.
故事到此为止, 后面就由你续写啦~~
- CSS3模拟checkbox
- css3 checkbox动画
- 利用CSS3美化checkbox radio
- CSS3制作iPhone的Checkbox
- CSS3设置checkbox的样式
- CSS3自定义Checkbox复选框
- css3自定义checkbox与radiobox
- css3模拟时钟
- css3模拟微信摇一摇
- css3动画模拟光标
- 在客户端模拟禁用CheckBox
- checkbox 多选点菜模拟
- 纯CSS3打造各式Checkbox开关按钮
- CSS3自定义美化复选框Checkbox组合
- Html5--利用lable+CSS3实现自定义checkbox
- 纯css3自定义复选框checkbox样式
- 纯CSS3美化radio和checkbox
- 使用CSS3美化复选框checkbox
- Qt经典出错信息之undefined reference to `vtable for classname
- live555---1--编译与运行
- powerdesign CDM图画图详解
- red5使oflaDemo播放采用绝对路径
- 2013年互联网十大趋势
- CSS3模拟checkbox
- Android 4.0 自定义锁屏
- 电脑开机出现 To interrupt normal post,press enter 处理办法
- 贝尔宾团队角色理论
- cocos2d-x lua分支加载ccbi文件
- 详解C中volatile关键字
- Aptana导入github.com的项目
- 【转载】软件工程知识体系全景图
- Android电源管理之三:PowerManager.WakeLock源码详读