话说,很久很久以前,一直到不久前,浏览器原生的checkbox(复选框)的样式大部分都不能改的,在各个浏览器中的外观和行为都不一致,这是一件相当让人蛋疼的事。

而在那个远古的蛮荒时代,还生活着一种叫攻城师的生物,每天被产品经理们强迫着,想方设法让checkbox外观一统江湖,苦不堪言。

在那个时代,css2和dom level2风行,却对checkbox束手无策,苦逼的攻城师们只能用JS来模拟checkbox的行为,无辜的checkbox只能灰溜溜的束之高阁~.~more

终于,新时代还是来临了~攻城师的救世主——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">请狠狠的点击我吧 --&amp;gt;</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没选中的时候显示一个下拉框,选中的时候显示另一个下拉框,效果还是看例子吧。

故事到此为止,后面就由你续写啦~~

PS: 本博文同步发表到www.alloyteam.com,欢迎分享拍砖

Comments
Write a Comment
  • charles reply

    This is cool!

  • 建筑模板 reply

    演示坏了,打不开i了

  • iAzrael reply

    @建筑模板 可以呀, 可能前段时间被墙了, ~~~~(>_<)~~~~

  • 诸葛小觉 reply

    小小的天有大大的梦想,很清新的博客,又学到东西了,感谢博主!

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟