el-radio被选中选项图标修改为对勾(√)

正常的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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容