更改单选按钮的背景颜色 | 元素用户界面

Question

我有一个 el-radio-button ，我需要更改所选按钮的背景颜色，默认情况下为亮蓝色。

我正在尝试这种方式：

<el-radio-group v-model="radio1">
      <el-radio-button label="New York"></el-radio-button>
      <el-radio-button label="Washington"></el-radio-button>
      <el-radio-button label="Los Angeles"></el-radio-button>
      <el-radio-button label="Chicago"></el-radio-button>
    </el-radio-group>

CSS （没有一个对我有用，它不会改变广播组）

.el-radio-button__inner.checked {
  background-color: rgb(222, 233, 243);
  border-color: #409eff;
}
.el-radio-button__orig-radio.checked + .el-radio-button__inner {
  background-color: rgb(222, 233, 243);
  border-color: #409eff;
}
.el-radio-button__inner .is-active {
  background-color: rgb(222, 233, 243);
  border-color: #409eff;
}

科迪戈

元素参考：： https ://element.eleme.io/#/es/component/radio

Answer 1

您需要使用第二个并将其更改如下：

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: rgb(222, 233, 243);
  border-color: #409eff;
}

你用过. 在checked之前，您需要将其更改为:进行检查。

.(dot)表示一个类，而:用于状态或pseudo用法。

Answer 2

您可以覆盖css变量

.el-radio-button {
  --el-radio-button-checked-bg-color: blue;
  --el-radio-button-checked-text-color: white;
  --el-radio-button-checked-border-color: dark-blue;
  --el-radio-button-disabled-checked-fill: gray;
}