Изменить цвет фона радио-кнопки | Элемент UI

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;
}

Codi go

Ссылка на элемент:: 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 использования.