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