element-ui el-radio单选组件,选中样式圆点变对勾✔

2,357 阅读1分钟
    <div class="">
      <div class="">性别</div>
      <div class="info-sex">
        <el-radio
          v-model="sexRadio"
          :label="item.label"
          v-for="(item, index) in sexList"
          :key="index"
          >{{ item.value }}</el-radio
        >
      </div>
    </div>
  .info-sex {
    ::v-deep.el-radio__input.is-checked .el-radio__inner {
      border-color: #424346;
      background-color: #424346;
    }
    ::v-deep.el-radio__input.is-checked + .el-radio__label {
      color: #424346;
    }
    ::v-deep.el-radio__input.is-checked .el-radio__inner:after {
      transform: rotate(45deg) scaleY(1);
    }
    ::v-deep.el-radio__label {
      color: #80838a;
    }
    ::v-deep.el-radio__inner::after {
      box-sizing: content-box;
      content: "";
      border: 1px solid #fff;
      border-left: 0;
      border-top: 0;
      height: 7px;
      left: 4px;
      position: absolute;
      top: 1px;
      transform: rotate(45deg) scaleY(0);
      width: 3px;
      transition: transform 0.15s ease-in 0.05s;
      transform-origin: center;
      border-radius: unset;
      background-color: transparent;
    }
  }

之前

之后