css3使用checked伪类隐藏传统的radio和checkbox
2015-06-30 00:00
459 查看
css3使用checked伪类隐藏传统的radio和checkbox
传统的radio和checkbox样式如下,有些过于简陋,下面用一种简单的方式来稍微改善一下这些按钮。radio和checkbox没有别的标签可以替代,同时也不会自己编辑原生样式。所以这里采取的方法是隐藏掉radio(checkbox)标签,通过修改对应的label标签来达到相同的效果,为了使label标签有动态的效果,需要使用css3的checked伪类,当然,使用js也是可以的。
代码如下
<div> <span>性别:</span> <input type="radio" id="sex-0" name="sex" value="0" checked> <label for="sex-0">男</label> <input type="radio" id="sex-1" name="sex" value="1" > <label for="sex-1">女</label> <input type="radio" id="sex-2" name="sex" value="2" > <label for="sex-2">保密</label> </div>
效果是这样的:
然后隐藏掉input,给label加上样式,选中之后label变色。
代码:
<link href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <style type="text/css"> input{ display: none; } label{ background: #eee; width: 45px; height: 30px; display: inline-block; text-align: center; border-radius: 5px; line-height: 30px; margin-left: 5px; cursor: pointer; } input:checked+label{ background: #5bc0de; color: #fff; } </style> <div> <span>性别:</span> <input type="radio" id="sex-0" name="sex" value="0" checked> <label for="sex-0"><i class="fa fa-male"></i>男</label> <input type="radio" id="sex-1" name="sex" value="1" > <label for="sex-1"><i class="fa fa-female"></i>女</label> <input type="radio" id="sex-2" name="sex" value="2" > <label for="sex-2">保密</label> </div>
效果如下:
选中相应的选项之后的label就会展示input:checked+label的样式。
checkbox也可以和上面一样的方法修改。 备注:checked伪类不支持ie6-8。
相关文章推荐
- CSS和文档
- css position用法
- 常用CSS样式
- 理解CSS3 transform
- PASSION之CSS3-outline
- 为button设置背景图片,且全无button痕迹的css
- css笔记03:伪类first-child
- CSS选择器详细总结
- css制作旋转的正方体
- 关于html CSS 绝对相对布局问题
- CSS改变字体下划线颜色
- 如何通过css的media属性,适配不同分辨率的终端设备?
- CSS hack
- css笔记02:选择器(标签式和类)
- CSS对浏览器的兼容性
- css限制字数
- 详解 CSS 属性 - 伪类和伪元素的区别
- CSS ::before 和 ::after 伪元素 进阶
- css笔记01:CSS例子
- 10个必备的CSS技巧总结