修改radio和checkbox的默认样式

来源：互联网发布：顾比均线的通达信源码编辑：程序博客网时间：2024/06/05 21:06

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

阅读全文

0 0