支持ie8单选框与复选框自定义样式

css 样式

/* wrapper divs 复选框与单选框样式 */
.custom-checkbox,.custom-radio{position:relative;}
/* input, label positioning 该样式控制checkbox  */
.custom-checkbox input{position:absolute;left:2px;top:0px;margin:0;}
.custom-checkbox label{display:block;position:relative;padding-right:1em;line-height:1;padding:.7em 0 .5em 30px;margin:0 0 .3em;cursor:pointer;}
/* states */
.custom-checkbox label{background:url(checkbox.gif) no-repeat;}
.custom-radio label{background:url(radiobutton.gif) no-repeat;}
.custom-checkbox label,.custom-radio label{background-position:-10px -14px;}
.custom-checkbox label.hover,.custom-checkbox label.focus,.custom-radio label.hover,.custom-radio label.focus{background-position:-10px -114px;}
.custom-checkbox label.checked,.custom-radio label.checked{background-position:-10px -214px;}
.custom-checkbox label.checkedHover,.custom-checkbox label.checkedFocus{background-position:-10px -314px;}
.custom-checkbox label.focus,.custom-radio label.focus{outline:1px dotted #ccc;}
/* input, label positioning 该样式控制radio */
.custom-radio input{position:absolute;left:2px;top:2px;margin:0;}
.custom-radio label{display:block;position:relative;padding-right:1em;line-height:1;padding:.7em 0 .5em 30px;margin:0 0 .3em;cursor:pointer;}

js
jQuery.fn.customInput = function(){
return $(this).each(function(){
if($(this).is('[type=checkbox],[type=radio]')){
var input = $(this);

// 使用输入的ID得到相关的标签
var label = $('label[for='+input.attr('id')+']');

// 包裹在一个div输入+标签
input.add(label).wrapAll('<div class="custom-'+ input.attr('type') +'"></div>');

// 必要的浏览器不支持：hover伪类的标签
label.hover(
function(){ $(this).addClass('hover'); },
function(){ $(this).removeClass('hover'); }
);

//绑定自定义事件，触发它，绑定点击，焦点，模糊事件
input.bind('updateState', function(){
input.is(':checked') ? label.addClass('checked') : label.removeClass('checked checkedHover checkedFocus'); 
})
.trigger('updateState')
.click(function(){ 
$('input[name='+ $(this).attr('name') +']').trigger('updateState'); 
})
.focus(function(){ 
label.addClass('focus'); 
if(input.is(':checked')){  $(this).addClass('checkedFocus'); } 
})
.blur(function(){ label.removeClass('focus checkedFocus'); });
}
});
};

jsp 页面写法

<td style="border: 0px"><input name="ghContent" id="ghbox6"
class="inputbox" type="radio" value="液压站" /> <label
for="ghbox6">液压站</label>

js 渲染 $('.inputbox').customInput(); //格式化复选框和单选框

点击打岔效果

jsp 页面写法

<td style="border: 0px"><input name="ghContent" id="ghbox6"
class="inputbox" type="radio" value="液压站" /> <label
for="ghbox6">液压站</label>

js 渲染 $('.inputbox').cusInput(); //格式化复选框和单选框

js 添加代码

jQuery.fn.cusInput = function(){
return $(this).each(function(){
if($(this).is('[type=checkbox]')){
var input = $(this);

// 使用输入的ID得到相关的标签
var label = $('label[for='+input.attr('id')+']');

// 包裹在一个div输入+标签
input.add(label).wrapAll('<div class="cus-'+ input.attr('type') +'"></div>');

// 必要的浏览器不支持：hover伪类的标签
label.hover(
function(){ $(this).addClass('hover'); },
function(){ $(this).removeClass('hover'); }
);

//绑定自定义事件，触发它，绑定点击，焦点，模糊事件
input.bind('updateState', function(){
input.is(':checked') ? label.addClass('checked') : label.removeClass('checked checkedHover checkedFocus'); 
})
.trigger('updateState')
.click(function(){ 
$('input[name='+ $(this).attr('name') +']').trigger('updateState'); 
})
.focus(function(){ 
label.addClass('focus'); 
if(input.is(':checked')){  $(this).addClass('checkedFocus'); } 
})
.blur(function(){ label.removeClass('focus checkedFocus'); });
}
});
};

css添加代码

/** 差号显示 */
.cus-checkbox input{position:absolute;left:2px;top:0px;margin:0;}
.cus-checkbox label{display:block;position:relative;padding-right:1em;line-height:1;padding:.7em 0 .5em 30px;margin:0 0 .3em;cursor:pointer;}

.cus-checkbox label{background:url(checkbox_cha.gif) no-repeat;}
.cus-checkbox label{background-position:-10px -14px;}
.cus-checkbox label.hover,.cus-checkbox label.focus{background-position:-10px -114px;}
.cus-checkbox label.checked{background-position:-10px -214px;}
.cus-checkbox label.checkedHover,.cus-checkbox label.checkedFocus{background-position:-10px -314px;}
.cus-checkbox label.focus{outline:1px dotted #ccc;}

在我的资源中有写好的列子