一、使用css+javaScript改变radio的样式
1、普通的radio
图示:
html代码
<div style="float:left;"><label class="label_title">海报模板:</label></div>
<div style="float:left;margin-left:5px;" id="lottery_model">
<input type="radio" id="input_radio_model_1" class="input_radio_style" checked="checked" name="model" value="1" />
<label name="input_radio_model_1" class="input_radio_checked" >模板1</label>
<input type="radio" id="input_radio_model_2" class="input_radio_style" name="model" value="2" />
<label name="input_radio_model_2" class="input_radio_nochecked" >模板2</label>
</div>
css代码
/*所有radio样式*/
.input_radio_style{
display:none;
margin:0px;
padding:0px;
}
/*radio label 样式*/
.input_radio_checked{
background: url(img/check_pink.png) right bottom no-repeat white;
height:26px;
line-height:26px;
border: 2px solid #ed5564;
padding:0px 10px;
/* color: #4d6980; 蓝*/
/* color: #319b00; 绿*/
color: #ed5564;
display:inline-block;
}
.input_radio_nochecked{
background: white;
height:26px;
line-height:26px;
border: 2px solid #b1b8bd;
padding:0px 10px;
display:inline-block;
}
.input_radio_mouseover{
background: white;
height:26px;
line-height:26px;
border: 2px solid #fa838f;
padding:0px 10px;
display:inline-block;
}
javaScript代码
window.onload = function(){
var modelLabels = document.getElementById('lottery_model').getElementsByTagName('label');
var modelRadios = document.getElementById('lottery_model').getElementsByTagName('input');
addRadioListen(modelLabels,modelRadios);
}
//添加radio点击事件监听
function addRadioListen(labels,radios){
for(i=0,j=labels.length ; i<j ; i++){
labels[i].οnclick=function(){
if(this.className == 'input_radio_nochecked' || this.className == 'input_radio_mouseover'){
for(k=0,l=labels.length ; k<l ; k++){
labels[k].className='input_radio_nochecked';
radios[k].checked = false;
}
this.className='input_radio_checked';
document.getElementById(this.attributes["name"].nodeValue).checked = true;
}
};
labels[i].οnmοuseοver=function(){
if(this.className == 'input_radio_nochecked'){
this.className='input_radio_mouseover';
}
};
labels[i].οnmοuseοut=function(){
if(this.className == 'input_radio_mouseover'){
this.className='input_radio_nochecked';
}
};
}
}
2、类似开关的radio
图示:
html代码
<div style="float:left;"><label class="label_title">当前状态:</label></div>
<div style="float:left;">
<input type="radio" id="input_radio_state_OPEN" class="input_radio_style" name="state" value="OPEN" />
<input type="radio" id="input_radio_state_CLOSE" class="input_radio_style" checked="checked" name="state" value="CLOSE" />
<label id="lottery_state_button" class="input_radio_state_close_img"></label>
</div>
css代码
/*开启关闭按钮*/
.input_radio_state_open_img{
background: url(img/state_open.png) no-repeat;
width:92px;
height:32px;
margin-left:5px;
display:inline-block;
cursor: pointer;
}
.input_radio_state_close_img{
background: url(img/state_close.png) no-repeat;
width:92px;
height:32px;
margin-left:5px;
display:inline-block;
cursor: pointer;
}
/*所有radio样式*/
.input_radio_style{
display:none;
margin:0px;
padding:0px;
}
javaScript代码(这里使用了jquery框架)
$("#lottery_state_button").click(function(){
var str = $("#lottery_state_button").attr("class");
if(str == 'input_radio_state_open_img'){
$("#lottery_state_button").attr("class","input_radio_state_close_img");
document.getElementById('input_radio_state_CLOSE').checked = true;
}else if(str == 'input_radio_state_close_img'){
$("#lottery_state_button").attr("class","input_radio_state_open_img");
document.getElementById('input_radio_state_OPEN').checked = true;
}
});
二、使用css+javaScript来改变checkbox样式
图示:
html代码
<div id="div_interest">
<input id="input_checkbox_football" class="input_checkbox_style" type="checkbox" name="interest" value="1" checked="checked"/>
<label name="input_checkbox_football" class="input_checkbox_checked" >足球</label>
<input id="input_checkbox_basketball" class="input_checkbox_style" type="checkbox" name="interest" value="2"/>
<label name="input_checkbox_basketball" class="input_checkbox_nochecked" >篮球</label>
</div>
css代码
.input_checkbox_style{
display: none;
}
.input_checkbox_checked{
background: url(images/checkbox_yes.png) left center no-repeat white;
height:26px;
line-height:26px;
padding-left:30px;
color: #ed5564;
display:inline-block;
}
.input_checkbox_nochecked{
background: url(images/checkbox_no.png) left center no-repeat white;
height:26px;
line-height:26px;
padding-left:30px;
color: #ed5564;
display:inline-block;
}
javaScript代码
window.onload = function(){
var Labels = document.getElementById('div_interest').getElementsByTagName('label');
var CheckBoxs = document.getElementById('div_interest').getElementsByTagName('input');
addCheckBoxListen(Labels,CheckBoxs);
}
//添加动作监听
function addCheckBoxListen(labels,checks){
for(i=0,j=labels.length ; i<j ; i++){
labels[i].οnclick=function(){
if(this.className == 'input_checkbox_nochecked'){
this.className='input_checkbox_checked';
document.getElementById(this.attributes["name"].nodeValue).checked = true;
}else if(this.className == 'input_checkbox_checked'){
this.className='input_checkbox_nochecked';
document.getElementById(this.attributes["name"].nodeValue).checked = false;
}
};
}
}