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

Question

单击时，我需要帮助在 .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
}

Answer 1

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

请注意，您需要确保父项具有 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>