css input checkbox和radio樣式美化

標籤：lin   input   ted   ddc   href   check   point   上傳   oat   

css input checkbox和radio樣式美化2014年9月1日 132495次瀏覽

在之前的一篇文章中，我已經介紹了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樣式美化