el-radio-button自定义样式

el-radio-button自定义样式

<div class="ai-tab-change">
    <el-radio-group v-model="search.isAbandoned" @change="tabChange">
        <el-radio-button label="0">样款</el-radio-button>
        <el-radio-button label="1">废款</el-radio-button>
    </el-radio-group>
</div>

<style lang="scss">
  .ai-tab-change {
    .el-radio-button__inner {
      width: 82px;
      height: 36px;
      border-radius: 4px 0px 0px 4px;
      border: 1px solid #D8DCE6;
      font-size: 14px;
      font-weight: 400;
      color: #696969;
      line-height: 14px;
      outline: none;
      box-shadow: none;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background: #E6ECF2;
      border: 1px solid #98B5CA;
      color: #0D4376;
      line-height: 14px;
      outline: none;
      box-shadow: none;
    }
  }
</style>