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:;
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:;
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")
})