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