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