修改radio和checkbox的默認樣式

html5內置的input type='radio'和type='checkbox'單選和複選框是比較醜的，基本上遇到產品經理，是鐵定過不去的，大多數的時候我們可以直接寫自定義樣式表，來替換input，不用input，通過jquery來控制dom，來模擬一個單選和複選的按鈕功能：

例如：

<b class="cbx cbxgreen-cur"></b>

.cbx{ display:inline-block; width:1.8rem; height:1.8rem; background:url(../images/cbx-ico1.png) no-repeat 0 0; background-size:1.8rem 1.8rem; vertical-align:-.3rem; margin-right:.5rem;}
.cbxgreen-cur{ background:url(../images/cbx-ico4.png) no-repeat 0 0; background-size:1.8rem 1.8rem;}

用這樣的樣式替換掉input的使用，達到控制單選和複選樣式的問題。

但是這種方式有很多的弊端，他是專門爲jquery的dom而生的一種做法方式，如果換做vue，就完全不適合：

接下來我們需要修改input的默認樣式，直接把input的默認樣式修改爲我們需要的樣式就ok了：

HTML如下:

      <ul>
        <li @click="choose(1)"><img src="../../images/bank/ny-ico.png" class="inBlock"/>中國農業
          <input type="radio" v-model="name" value="1">
        </li>

        <li @click="choose(2)"><img src="../../images/bank/zs-ico.png" class="inBlock"/>招商銀行
          <!--<b class="cbx cbxgreen-cur"></b>-->
          <input type="radio" v-model="name" value="2">
        </li>

        <li @click="choose(3)"><img src="../../images/bank/zg-ico.png" class="inBlock"/>中國銀行
          <!--<b class="cbx"></b>-->
          <input type="radio" v-model="name" value="3">
        </li>

        <li @click="choose(4)"><img src="../../images/bank/ny-ico.png" class="inBlock"/>民生銀行
          <!--<b class="cbx"></b>-->
          <input type="radio" v-model="name" value="4">
        </li>

        <li @click="choose(5)"><img src="../../images/bank/zs-ico.png" class="inBlock"/>招商銀行
          <!--<b class="cbx"></b>-->
          <input type="radio" v-model="name" value="5">
        </li>

        <li @click="choose(6)"><img src="../../images/bank/zg-ico.png" class="inBlock"/>中國銀行
          <!--<b class="cbx"></b>-->
          <input type="radio" v-model="name" value="6">
        </li>

        <li @click="choose(7)"><img src="../../images/bank/ny-ico.png" class="inBlock"/>民生銀行
          <!--<b class="cbx"></b>-->
          <input type="radio" v-model="name" value="7">
        </li>

        <li @click="choose(8)"><img src="../../images/bank/zs-ico.png" class="inBlock"/>招商銀行
          <!--<b class="cbx"></b>-->
          <input type="radio" v-model="name" value="8">
        </li>

        <li @click="choose(9)"><img src="../../images/bank/zg-ico.png" class="inBlock"/>中國銀行
          <!--<b class="cbx"></b>-->
          <input type="radio" v-model="name" value="9" >
        </li>
      </ul>

css如下：

.banklist input[type="radio"] {
    -webkit-appearance: none;
    display: inline-block;
    margin: 10px;
    outline: none;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.9rem;
    cursor: pointer;
    vertical-align: top;
    border: 2px solid #e3dae1;
    background: url("../../images/cbx-ico4.png") no-repeat center;
    background-size: contain;

    position: absolute;
    right: 1.5rem;
  }

/*  input:checked {
    -webkit-transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1),
    -webkit-transform .25s cubic-bezier(0, 0, .2, 1);
  }

  input:active {
    -webkit-transform: scale(1.5);
    -webkit-transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);
  }*/

  .banklist input[type="radio"],
  .banklist input[type="radio"]:active {
    background-position: 0 5rem;
  }

  .banklist input[type="radio"]:checked {
    background-position: 0 0;
    border: 2px solid #00cb00;
  }

  input:checked ~ input,
  input:checked ~ input:active {
    background-position: 0 5rem;
  }