Question

几天来，我一直在为这个问题而绞尽脑汁。我正在使用Contact Form 7（CF7）的wordpress网站上工作。基本上，我正在尝试更改选中复选框时每个列表项的颜色。

到目前为止，这个主题一直是我的主要灵感来源：https://www.sitepoint.com/community/t/on-click-of-check-box-my-div-border-and-text-color-should-be-in-blue/276230/3

但是我不确定如何使代码在CF7编辑器中工作（我已经在该插件中尝试过支持论坛，但是没人在那回答我哈哈）。

CF7中的相关代码：

<script>
function UpdateFeatures(checkbox) {
  console.log(document.querySelector(".wpcf7-list-item"));
  document.querySelector(".wpcf7-list-item").classList.remove("changeColor");
  if (checkbox.checked) {
  document.querySelector(".wpcf7-list-item").classList.add("changeColor");
  }
}
</script>

CF7中使用的Javascript：

#getStartedInterestsAndGoals input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

span.wpcf7-list-item {
  display: inline-block;
  margin: 0 0 15px 0;
}

.wpcf7-list-item {
  margin: 0 0 20px 1em;
  border: 1px solid #f26922;
  border-radius: 40px;
  text-transform: uppercase;
  font-size: 16px;
  padding: 10px;
  width: 100%;
}

.wpcf7-list-item:hover {
  background-color: #f26922;
  border-color: #333333;
  color: #ffffff;
}
.changeColor {
  background-color: #f26922;
  border-color: #333333;
  color: #ffffff;
}

CSS：

{{1}}

JSFiddle演示由CF7制成的代码： https://jsfiddle.net/p9wrdsmo/1/

任何对此的帮助将不胜感激！我不太擅长JavaScript，并且会偏爱纯HTML / CSS，但我认为这是不可能的。

谢谢！

在联系表7中选中复选框时更改列表项的颜色

0 个答案: