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