正常的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>
