修改複選框默認樣式

咱們都知道表單的複選框是有默認樣式的，這裏就不貼圖了，
若是但願把複選框樣式修改美觀一些呢？爲以下圖所示：

實現方法：用label標籤關聯複選框，把複選框設置爲透明（opacity:0;），
而後給label加background樣式，並加入點擊事件改變背景圖片。
html部分：

<div class="box box-list">
    <a href="" class="hd">
        <img alt="Thumb" src="/thumb.jpg" />
    </a>
    <div class="bd">
        <a href="menu-detail.html">
        <b>紅燒肉</b>
        <p></p>
        </a>
        <p>
          <b>價格：</b>
          <span class="fred">25.00</span>
        </p>
    </div>
</div>

css:

.selectBtn {
  opacity: 0;
  position: absolute;
  right: 5px;
  top: 35%;
}
.formycheckbox {
  position: absolute;
  right: 20px;
  top: 35%;
  width: 28px;
  height: 28px;
  background: url('unchoosen.png') no-repeat;
  background-size: cover;
}
.selected {
  position: absolute;
  right: 20px;
  top: 35%;
  width: 28px;
  height: 28px;
  background: url(choosen.png) no-repeat;
  background-size: cover;
}

javascript:

//須要引用jQuery
<script>
$(function(){
  $(".box-list label").click(function(){
    $(this).toggleClass("selected");
  });
});   
</script>