使用before，after伪元素更改input radio/c

之所以记录，是为了以后自己查找起来方便。

先上效果图： 

html布局：

           <input type="radio" name="payway" class="radio-type" id="surplus" />

           <label for="surplus">余额支付</label>

          <input type="radio" name="payway" class="radio-type" id="wechat" />

           <label for="wechat">微信支付</label>

css样式：

.radio-type{

  width: 14px;

  height: 14px;

  position: relative;

  vertical-align: sub;

}

.radio-type:before{

    content: '';

    width: 12px;

    height: 12px;

    border: 1px solid #858585;

    display: inline-block;

    border-radius: 50%;

    vertical-align: sub;

    background-color: #fff;

}

.radio-type:checked:before{

    content: '';

    width: 12px;

    height: 12px;

    border: 1px solid #FF6700;

    background:#FF6700;

    display: inline-block;

    border-radius: 50%;

    vertical-align: sub;

}

.radio-type:checked:after{

    content: '';

    width: 7px;

    height:3px;

    border: 2px solid white;

    text-align: center;

    display: block;

    position: absolute;

    top: 3px;

    left:2px;

    vertical-align: sub;

    border-top: transparent;

    border-right: transparent;

    transform: rotate(-45deg);

}

/* 如果想要选中框所对应的文字也变色*/

.radio-type:checked+label{ color:#ff6700;}

同样的写法 可自定义checkbox的样式~~

2.在vue中如何判断input框是否选中？----用v-model