美文网首页
el-radio被选中选项图标修改为对勾(√)

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

作者: 3e2235c61b99 | 来源:发表于2024-12-18 10:49 被阅读0次

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

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/gvmrejtx.html