您的位置：首页 > Web前端 > CSS

css美化单选款、复选框

2016-06-24 13:42 525 查看
一款美化单选款、复选框的样式

支持度：

Chrome
Firefox
Safari
Opera
IE9 && IE9+
代码：
<!DOCTYPE html>
<html>
<head></head>
<style>
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
line-height: 140%;
}

@keyframes hover-color {
from {
border-color: #c0c0c0;
}
to {
border-color: #3e97eb;
}
}

.magic-radio,
.magic-checkbox {
position: absolute;
display: none;
}

.magic-radio[disabled],
.magic-checkbox[disabled] {
cursor: not-allowed;
}

.magic-radio + label,
.magic-checkbox + label {
position: relative;
display: block;
padding-left: 30px;
cursor: pointer;
vertical-align: middle;
}

.magic-radio + label:hover:before,
.magic-checkbox + label:hover:before {
animation-duration: 0.4s;
animation-fill-mode: both;
animation-name: hover-color;
}

.magic-radio + label:before,
.magic-checkbox + label:before {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 20px;
height: 20px;
content: '';
border: 1px solid #c0c0c0;
}

.magic-radio + label:after,
.magic-checkbox + label:after {
position: absolute;
display: none;
content: '';
}

.magic-radio[disabled] + label,
.magic-checkbox[disabled] + label {
cursor: not-allowed;
color: #e4e4e4;
}

.magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
.magic-checkbox[disabled] + label:hover,
.magic-checkbox[disabled] + label:before,
.magic-checkbox[disabled] + label:after {
cursor: not-allowed;
}

.magic-radio[disabled] + label:hover:before,
.magic-checkbox[disabled] + label:hover:before {
border: 1px solid #e4e4e4;
animation-name: none;
}

.magic-radio[disabled] + label:before,
.magic-checkbox[disabled] + label:before {
border-color: #e4e4e4;
}

.magic-radio:checked + label:before,
.magic-checkbox:checked + label:before {
animation-name: none;
}

.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after {
display: block;
}

.magic-radio + label:before {
border-radius: 50%;
}

.magic-radio + label:after {
top: 6px;
left: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #3e97eb;
}

.magic-radio:checked + label:before {
border: 1px solid #3e97eb;
}

.magic-radio:checked[disabled] + label:before {
border: 1px solid #c9e2f9;
}

.magic-radio:checked[disabled] + label:after {
background: #c9e2f9;
}

.magic-checkbox + label:before {
border-radius: 3px;
}

.magic-checkbox + label:after {
top: 2px;
left: 7px;
box-sizing: border-box;
width: 6px;
height: 12px;
transform: rotate(45deg);
border-width: 2px;
border-style: solid;
border-color: #fff;
border-top: 0;
border-left: 0;
}

.magic-checkbox:checked + label:before {
border: #3e97eb;
background: #3e97eb;
}

.magic-checkbox:checked[disabled] + label:before {
border: #c9e2f9;
background: #c9e2f9;
}
</style>
<body>
<h3>Checkbox</h3>

<div>
<input class="magic-checkbox" type="checkbox" name="layout" id="1">
<label for="1">Normal</label>
</div>

<div>
<input class="magic-checkbox" type="checkbox" name="layout" id="2" checked="checked">
<label for="2">Checked</label>
</div>

<h3>Radio</h3>

<div>
<input class="magic-radio" type="radio" name="radio" id="11">
<label for="11">Normal</label>
</div>

<div>
<input class="magic-radio" type="radio" name="radio" id="22" checked>
<label for="22">Checked</label>
</div>

<div>
<input class="magic-radio" type="radio" id="33" disabled="disabled">
<label for="33">Disabled</label>
</div>

<div>
<input class="magic-radio" type="radio" id="44" disabled="disabled" checked>
<label for="44">Checked && Disabled</label>
</div>
</body>
</html>


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航