单选按钮和多选按钮的样式设置

以下代码IE9以上执行没有问题:

1、css中样式设置:

/*父元素div*/
.choice{  
position: relative;  
}  
/*label*/
.choice .radio{  
position: relative;  
display: inline-block;  

padding-left: 25px;  
cursor: pointer;  
}  
/*label input*/
.choice .radio input{  
position: absolute; 
left:-2000px; 
    
}  
.choice .radio i{  
display: block;  
position: absolute;  
top: 0;  
left: 0;  
width: 15px;  
height: 15px;  
outline: 0;  
/*未选中 i border*/
border: 1px solid #47a8c0;  
/*未选中 i 背景*/
background: #9cd9e8;  
border-radius: 50%;  
transition: border-color .3s  
-webkit-transition: border-color .3s;  
}  
 /*给与input标签相邻的i标签设置伪元素*/
.choice .radio input+i::after{  
position: absolute;  
content: '';  
top: 3px;  
left: 3px;  
width: 9px;  
height: 9px;  
border-radius: 50%;  
/*设置input被选中后，i::after的背景色，
不过这时opacity:0,见下一句代码*/
background-color: #47a8c0;  
opacity: 0;
/*给i::after元素的opacity属性设置过渡*/
transition: opacity .1s;  
-webkit-transition: opacity .1s; 


}  
/*input radio被选中后，给它相邻的i::after 设置样式*/
.choice .radio input:checked+i::after{  
opacity: 1;  
} 
/*多选按钮样式设置*/
.select{
position:relative;
}

.select .checkbox{  
position: relative;  
display: inline-block;  

padding-left: 25px;  
cursor: pointer;  
} 
/*label input*/
.select .checkbox input{  
position: absolute;  
left:-2000px;

}
.select .checkbox i{  
display: block;  
position: absolute;  
top: 0;  
left: 0;  
width: 15px;  
height: 15px;  
background: url('checkbox_select.png') left top no-repeat; 
/*IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size*/
background-size: cover;
/*火狐浏览器*/
-moz-background-size:cover;
/*chrome和safari*/
-webkit-background-size:cover;
background-image: url('checkbox_select.png');
 
}
.select .checkbox input:checked+i{
background: url('checkbox_selected.png') left top no-repeat; 
/*此处同上*/
background-size: cover;

}

2、html标签设置

<fieldset>
<legend>单选按钮和多选按钮的样式设置</legend>
<div class="choice"> 
您的性别: 
<label class="radio">男<input type="radio" name="radio" value="1" checked><i></i></label>  
<label class="radio">女<input type="radio" value="2" name="radio"><i></i></label>
<label class="radio">保密<input type="radio" value="3" name="radio"><i></i></label>  
</div>
<br />
<div class="select">
您的爱好:
<label for="swimm" class='checkbox'>游泳
<input type="checkbox" id='swimm' /><i></i>
</label>
<label for="run" class='checkbox'>跑步
<input type="checkbox" id='run' /><i></i>
</label>
<label for="climb" class='checkbox'>爬山
<input type="checkbox" id='climb' /><i></i>
</label>
</div>
</fieldset>

更多相关文章

随机推荐