css3使用checked伪类隐藏传统的radio和checkbox

为什么80%的码农都做不了架构师？>>>   

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。

转载于:https://my.oschina.net/Laily/blog/472340