css input checkbox和radio樣式美化

在之前的一篇文章中，我已經介紹了input file上傳按鈕的美化，地址：http://www.haorooms.com/post/css_input_uploadmh ,今天，我們來講一下checkbox美化和radio美化，關於select下拉框的美化的話，要用一個jquery插件了，這個插件後面我們再講！急用的同學可以留言！ 但是像checkbox美化和radio美化，input美化，根本就不用插件了。思路都一樣的，先把之前的按鈕透明度opacity設置為0,然後，外層用div包裹，就實現了美化功能。

效果圖如下：

html代碼如下：

<span class="pay_list_c1 on">
<input type="radio" checked="checked" name="paylist" value="1" class="radioclass">
</span>

css 代碼：

.pay_list_c1 {
width: 24px;
height: 18px;
float: left;
padding-top: 3px;
cursor: pointer;
text-align: center;
margin-right: 10px;
background-image: url(images/inputradio.gif);
background-repeat: no-repeat;
background-position: -24px 0;
}
.radioclass {
opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.on {
background-position: 0 0;
}
 

圖片下載：

checkbox方法一樣：

html

<div class="piaochecked on_check">
                <input name="need_inv" type="checkbox" style="height:20px;width:20px;" class="radioclass input" value="1">
              </div>

css：

.piaochecked {
width: 20px;
height: 20px;
float: left;
cursor: pointer;
margin-left: 10px;
text-align: center;
background-image: url(images/checkbox_01.gif);
background-repeat: no-repeat;
background-position: 0 0;
}

.on_check {
background-position: 0 -21px;
}
.radioclass {
opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
 

js的點擊切換效果很簡單，我這裏就不寫了，關鍵是思路，希望對您有幫助！

js點擊切換效果我這裏簡單的寫一下：

關於radio：

因為radio選中，下一個會失去選中效果，一個組內，name設置成一樣的，我們基本上只是改變css的class就可以了。

假如一個組內，所有radio的父級span都有上面寫的pay_list_c1 那麽js可以這麽寫

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

關於checkbox：

因為是可以多選的，所以對其class做toggle就可以了，因為jquery新版本已經廢棄了toggle事件，只保留toggle方法。所有我們要自己寫toggle寫法如下：

註：默認input checkbox的選中狀態和外面父級的div的class是一致的。

$(".piaochecked").on("click",function(){
    $(this).hasClass("on_check")? $(this).removeClass("on_check"):$(this).addClass("on_check");
   //或者這麽寫
  // $(this).toggleClass( "on_check" );
})

css input checkbox和radio樣式美化