前言
鉴于在移动端开发中用到的移动端的组件库内没有符合UI设计要求的radio样式,只能使用最原始的input来造成符合需求的框
实现
样式与原始的差不多,只是选中的颜色改成绿色
<input
id="inputChoice1"
v-model="advice"
class="select"
type="radio"
:disabled="!isLeader"
name="leaderadvice"
value="choice1"
/>
<label for="inputChoice1"></label>
<span>choice1</span>
<input
id="inputChoice2"
v-model="advice"
class="select"
type="radio"
:disabled="!isLeader"
name="leaderadvice"
value="choice2"
/>
<label for="inputChoice2"></label>
<span>choice2</span>
选中时:
禁用时
样式的修改主要还是借助各种选择期,以及将选中框的样式寄托在label上
样式代码如下
//将input的圆框隐藏
input[type='radio'] {
width: 0.32rem;
height: 0.32rem;
display: none;
}
//定位label到圆框的位置,并修改样式为圆框
label {
position: relative;
top: 0.1rem;
width: 0.32rem;
height: 0.32rem;
border-radius: 50%;
border: 1px solid #999;//默认为边框
}
/*设置选中的radio的样式*/
/* + 是兄弟选择器,获取选中后的label元素*/
input:checked + label {
background: url('../../../assets/images/mobile/icon-check.png'); //直接借助背景图片
border: none;
}
/*设置禁用的radio的样式*/
input:checked[disabled] + label {
background: url('../../../assets/images/mobile/icon-check-disabled.png');
border: none;
}