之所以记录，是为了以后自己查找起来方便。
先上效果图：
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
