Html 如何在单击时更改单选按钮的背景色（联系表格7）

我正在尝试更改单击单选按钮的背景色（联系表单7）

HTML代码（联系表格7）

默认情况下，它应该显示绿色，工作正常，但单击后，它应该将颜色更改为红色，不工作

---

有人能告诉我我做错了什么吗？

首先，请确保您已按以下方式在联系人表单7快捷码中添加了单选按钮：

[radio your-radio-btn default:1 "Radio 1" "Radio 2" "Radio 3"]

然后，使用下面的css代码。也请参考我写的这篇速记

.wpcf7-form-control.wpcf7-radio {
    position: relative;
}

/* Container */
.wpcf7-list-item {
  display: block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wpcf7-list-item input[type='radio'] {
  opacity: 0;
  position: absolute;
  z-index: 9;
  top: .7em;
  left: 1em;
}

/* On mouse-over, add background color */
.wpcf7-list-item input[type="radio"] + span::before {
  background-color: #2ad587;
  transition: background 0.5s linear;
    -webkit-transition: background 0.5s linear;
}

input[type="radio"] + span::before {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0px 12px;
  vertical-align: middle;
  cursor: pointer;
  border: solid 2px #666;
  border-radius: 50%;
  text-align: center;
  content: '';
  transform: scale(0.8);
}

input[type="radio"]:checked + span::before {
  content: "\2713";
  color: #fff;
  width: 38px;
  height: 38px;
  border: solid #666;
  background-color: red;
}

以下是我这边的情况：

---

您的html代码缺少输入收音机？请正确更新标记，这就是contact form 7插件呈现或显示标记的方式@Zamadulvahidi建议不要使用contact form 7，因为存在JavaScript问题，并且在过去两个月内没有更新：

[radio your-radio-btn default:1 "Radio 1" "Radio 2" "Radio 3"]

.wpcf7-form-control.wpcf7-radio {
    position: relative;
}

/* Container */
.wpcf7-list-item {
  display: block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wpcf7-list-item input[type='radio'] {
  opacity: 0;
  position: absolute;
  z-index: 9;
  top: .7em;
  left: 1em;
}

/* On mouse-over, add background color */
.wpcf7-list-item input[type="radio"] + span::before {
  background-color: #2ad587;
  transition: background 0.5s linear;
    -webkit-transition: background 0.5s linear;
}

input[type="radio"] + span::before {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0px 12px;
  vertical-align: middle;
  cursor: pointer;
  border: solid 2px #666;
  border-radius: 50%;
  text-align: center;
  content: '';
  transform: scale(0.8);
}

input[type="radio"]:checked + span::before {
  content: "\2713";
  color: #fff;
  width: 38px;
  height: 38px;
  border: solid #666;
  background-color: red;
}