input_radio_自定义样式

自定义radio样式切换

原生使用方法：

<input type="radio" name="sex" id="sex-female" v-model="inputValue" value="female"><label for="sex-female"></label><input type="radio" name="sex" id="sex-male" v-model="inputValue" value="male"><label for="sex-male"></label>

• name：多个input定义同一个name值，构成单选效果。
• id：和label中for绑定使用，用于点击label时，input选中切换。
• value：存储input选中值
• v-model：vue中查看选中的value值。

切换自定义背景图片：

HTML:<div class="input-common-box">  <input type="radio" class="ques-input-common" name="sex" id="sex-male" value="male" v-model="testdata">  <label class="ques-input-replace" for="male"></label></div><div class="input-common-box">  <input type="radio" class="ques-input-common" name="sex" id="femal" value="2" v-model="testdata">  <label class="ques-input-replace" for="femal" ></label></div>SCSS:.input-common-box {    width:24px;    height:24px;    display: flex;    justify-content: center;    align-items: center;    cursor: pointer;}//外层div样式.ques-input-common {    appearance: none;     -webkit-appearance: none;    outline: none;    display:none}//input样式隐藏.ques-input-replace {    width: 100%;    height:100%;//高度和宽度定义了与外层div同步，也可与外层不同    display: inline-block;    background:url("images/check_01.png") no-repeat; //用span样式替换input样式    background-size: contain;}.ques-input-common:checked +.ques-input-replace {    background:url("images/check_02.png") no-repeat; //input选中状态图片    background-size: contain;}