尝试自定义我的单选按钮，但没有任何改变

Question

我想将选中的按钮更改为其他颜色。我没有${#strings.contains(obj.Title, 'choice')} and ${#strings.contains(obj.ProductTitle, 'honey')} 属性，因为我正在通过一个对象映射以显示值。我尝试定位输入标签，但似乎无济于事。我也希望能够在悬停时更改颜色，但是我也没有运气。

这是我的CSS：

checked

这是按钮文件：

.radio-btn {
    margin: 0 10px 10px 0;
    background-color: black;
}

.radio-btn:hover {
    background-color: black;
}

Answer 1

我不知道它是否正是您要的东西，但是您可以使用CSS创建伪造的单选按钮。这是一个示例：

super().__new__

input[type="radio"] {
  opacity: 0;
  z-index: 1;
}

label { position: relative; }

label:before, label:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}

label:before {
  width: 15px;
  height: 15px;
  background-color: #3b3a39;
  left: -20px;
}

label:after {
  width: 7px;
  height: 7px;
  background-color: #f0e9e9;
  left: -16px;
  opacity: 0;
}

input[type="radio"]:checked + label:after { opacity: 1; }
input[type="radio"]:hover + label:before { background-color: #74706c; }