CSS3美化表单控件全集

二.美化单选框
 
lable标签可以通过for属性与单选框实现联动。我们利用这一特性来实现美化单选框，这也是原理所在。还有就是别忘了将真正的单选框(type="radio")隐藏掉。

CSS Code复制内容到剪贴板

/*用过label标签来模拟radio 的样式*/  

.radio-block label{   

    display: inline-block;   

    position: relative;   

    width: 28px;   

    height: 28px;   

    border: 1px solid #cccccc;   

    background-color: #fff;   

    border-radius: 28px;   

    cursor: pointer;   

    margin-right:10px;   

}   

input[type="radio"]{   

    display: none;   

}   

.radio-block label:after{   

    content: '';   

    display: block;   

    position: absolute;   

    width: 20px;   

    height: 20px;   

    left: 4px;   

    top: 4px;   

    background-color: #28bd12;   

    border-radius: 20px;   

    /*通过scale属性来控制中心点*/  

    -webkit-transform: scale(0);   

    transform: scale(0);   

}   

/*选中样式*/  

input[type="radio"]:checked + label{   

    background-color :#eee;   

    -webkit-transition: background-color .3s ease-in;   

    transition: background-color .3s ease-in;   

}   

/*选中之后的样式*/  

input[type="radio"]:checked + label:after{   

    -webkit-transform: scale(1);   

    transform: scale(1);   

    -webkit-transition: transform .2s ease-in;   

    transition: transform .2s ease-in;   

}    

最后效果：

三.美化复选框

原理和单选框的制作方式类似。在checked的时候该表圆形的left值和label的背景。

CSS Code复制内容到剪贴板

.switch-block{   

    width: 980px;   

    padding: 3% 0;   

    margin: 0 auto;   

    text-align: center;   

    background-color: #fc9;   

}   

.switch-block label{   

    display: inline-block;   

    width: 62px;   

    height: 30px;   

    background-color:#fafafa;   

    border:1px solid #eee;   

    border-radius: 16px;   

    position: relative;   

    margin-right: 10px;   

    cursor: pointer;   

    -webkit-transition: background .2s ease-in;   

    transition :background .2s ease-in;   

}   

input[type="checkbox"]{   

    display: none;   

}   

.switch-block label:after{   

    content: '';   

    position: absolute;   

    width: 28px;   

    height: 28px;   

    border: 1px solid #eee;   

    border-radius: 14px;   

    left: 1px;   

    background-color:#fff;   

    -webkit-transition: left .2s ease-in;   

    transition: left .2s ease-in;   

}   

.switch-block input[type="checkbox"]:checked + label{   

    background-color:#3c6;   

    -webkit-transition: background .2s ease-in;   

    transition :background .2s ease-in;   

}   

.switch-block input[type="checkbox"]:checked + label:after{   

    left: 32px;   

    -webkit-transition: left .2s ease-in;   

    transition: left .2s ease-in;   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!