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

12 篇文章 0 订阅

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;}

我的资源中有写好的列子

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值