正常的el-radio
样式为:
业务要求被选中的选项图标修改为如下样式:
具体代码如下:
<div class="app-container">
<div class="lineH50">普通单选框</div>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
<div class="lineH50">被选中的选项展示“√”</div>
<div class="custom">
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</div>
</div>
<style scoped lang="scss">
.custom {
::v-deep .el-radio__input.is-checked .el-radio__inner {
border: 1px solid green;
border-radius: 50%;
background: #FFF;
width: 14px;
height: 14px;
&::after {
content: '';
width: 8px;
height: 5px;
border-radius: 0;
border: 2px solid green;
border-top: transparent;
border-right: transparent;
transform: rotate(-45deg);
position: absolute;
top: 3px;
left: 2px;
display: block;
}
}
}
</style>