input美化 checkbox和radio样式

input美化    checkbox和radio样式

看惯了input[checkbox]和input[radio]默认样式，有没有想要改变一下呢？比如下面的样式：

　比起html默认的样式，上图这些是不是美观多了呢？并且这样的input美化，无需jquery插件，只要几行css代码就可以。

 思路

　

   思路很简单：（1）将之前的按钮透明度opacity设置为0；（2）外层用div包裹

 

 实现过程

   图片下载：      

【html代码】

<div class="hdz_input_radio checked"><input type="radio" checked="checked" value="1" class="hdz_radio"/></div>

【css代码】

.hdz_input_radio{
    width: 14px;
    height: 14px;
    padding-top: 3px;
    background: url(images/radio.png);
}
.hdz_input_radio.checked{
    background: url(images/radio_checked.png);
}

.hdz_radio {
    opacity: 0;
    cursor: pointer;
    -ms-filter:"progid:DXImageTransform.Miscrosoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
}

checkbox方法一样：

【html代码】

<div class="hdz_input_checkbox checked"><input type="checkbox" name=" checkbox" class="hdz_checkbox " value="1"/></div>

【css代码】

.hdz_input_checkbox {
    width: 14px;
    height: 14px;
    background: url(images/checkbox.png);
}
. hdz_input_checkbox.checked {
    background: url(images/checkbox_checked.png);
}
. hdz_checkbox {
    opacity: 0;
    cursor: pointer;
    -ms-filter:"progid:DXImageTransform.Miscrosoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
}

到这里为止，美化步骤就结束了。但是还缺少了js的点击切换效果。其实切换效果的思路也是比较简单的。

radio:

这是单选控件，所以我们只要将一个组内的name值设置成一样，通过改变css的class就可以了。

$(". hdz_input_radio").on("click",function(){
    $(this).addClass("checked").siblings().removeClass("checked");
})

checkbox:

这是多选控件，所以我们对其class做toggle就可以了。

$(".hdz_input_checkbox").on("click",function(){
    $(this).toggleClass("checked");    
})

或者自己写toggle方法：

$(".hdz_input_checkbox").on("click",function(){
    $(this).hasClass("checked") ?$(this).removeClass("checked"):$(this).addClass("checked")    
})