css input checkbox和radio樣式美化

參考：https://segmentfault.com/a/1190000004553258

　　　http://www.haorooms.com/post/css_mh_ck_radio

 

思路都一樣的，先把radio,checkbox按鈕透明度opacity設置為0,然后，外層用span包裹，就實現了美化功能。

html代碼：

<span class="init-radio-style">
    <input type="radio" name="productType" id="po1" value="_90" class="radio-class">
</span>

<label for="po1">90天項目</label>

scss 代碼：
.init-radio-style {

 width: 24px;
 height: 24px;
 padding-top: 3px;
 cursor: pointer;
 text-align: center;
 background: url("/images/icons/spr.png") no-repeat 0 -209px;
 &.on {
 background-position: 0 -233px;
 }
 .radio-class {
 opacity: 0;
 cursor: pointer;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 }
}

JS代碼：

//初始化radio
$('.init-radio-style').on('click',function() {
    var $this=$(this);
    $('.init-radio-style').removeClass('on');
    $this.addClass("on");
});

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

因為是可以多選的，所以對其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" ); })