使用Javascript在没有按钮的情况下更改div上的边框颜色

如何解决使用Javascript在没有按钮的情况下更改div上的边框颜色

我需要帮助在单击时在 .wpcf7-list-item 元素上添加边框颜色。我试过 :focus & :active 并且它仍然不显示边框。 ff。是我拥有的代码：

Contact Form 7 Multi-Steps:

<div style="display:inline; text-align:center">[radio firstpage class:firstgroup use_label_element default:1 "Spitzlift" "Rollstuhllift" "Weiß ich noch nicht"]</div>

Page Inspector:

<span class="wpcf7-form-control wpcf7-radio firstgroup">
   <span class="wpcf7-list-item first">
      <label><input type="radio" name="firstpage" value="Spitzlift" checked="checked"><span class="wpcf7-list-item-label">Spitzlift</span></label>
   </span>

   <span class="wpcf7-list-item"><label><input type="radio" name="firstpage" value="Rollstuhllift"><span class="wpcf7-list-item-label">Rollstuhllift</span></label>
   </span>

   <span class="wpcf7-list-item last"><label><input type="radio" name="firstpage" value="Weiß ich noch nicht"><span class="wpcf7-list-item-label">Weiß ich noch nicht</span></label>
   </span>
</span>

Here's the code I used in CSS:
.firstgroup span.wpcf7-list-item:active {
   border:2px solid #05b3cf
}

解决方法

这可以单独通过 CSS 来实现。您可以为 ::before 单选按钮使用 :checked 伪元素并为其应用边框。

请注意，您需要确保父项具有 position: relative 样式以使 ::before 元素为 position: absolute 并被拉伸以填充其整个父元素..

.wpcf7-list-item {
  position: relative;
  padding: 4px;
}

.wpcf7-list-item input[type="radio"]:checked::before {
  content: ' ';
  position: absolute;
  display: block;
  top:0;
  right:0;
  left: 0;
  bottom: 0;
  border: solid 1px red;
}

<span class="wpcf7-form-control wpcf7-radio firstgroup">
   <span class="wpcf7-list-item first">
      <label><input type="radio" name="firstpage" value="Spitzlift" checked="checked"><span class="wpcf7-list-item-label">Spitzlift</span></label>
   </span>

   <span class="wpcf7-list-item"><label><input type="radio" name="firstpage" value="Rollstuhllift"><span class="wpcf7-list-item-label">Rollstuhllift</span></label>
   </span>

   <span class="wpcf7-list-item last"><label><input type="radio" name="firstpage" value="Weiß ich noch nicht"><span class="wpcf7-list-item-label">Weiß ich noch nicht</span></label>
   </span>
</span>