el-radio和el-select自定义禁用样式

el-radio

 禁用状态

 <el-radio-group v-model="gender">
      <el-radio
        disabled
        v-for="item in genderList"
        :key="item.id"
        :label="item.label"
      >
        {{ item.label }}
      </el-radio>
    </el-radio-group>


data中定义

genderList: [
        { id: "gender01", label: "男", value: "1" },
        { id: "gender02", label: "女", value: "2" },
      ],

样式

<style scoped>
::v-deep .el-radio__input.is-disabled + .el-radio__label {
  color: #a7a2a2 !important;
}

::v-deep .el-radio__input.is-disabled.is-checked + .el-radio__label {
  color: #000 !important;
}

::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: #7c7c7c !important;
  border-color: #b0d9ff !important;
}
</style>

 el-select 

 

 <el-select v-model="gender" disabled class="special-color">
        <el-option
          v-for="item in genderList"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        ></el-option>
     </el-select>

data中的定义
  genderList: [
        { id: "gender01", label: "男", value: "1" },
        { id: "gender02", label: "女", value: "2" },
      ],

样式定义

::v-deep .special-color input[disabled],input:disabled, input.disabled{
   -webkit-text-fill-color: black;
}