使用 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 元素处于绝对位置并拉伸以填充其整个父元素..

.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>

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

Change Border Color on div without button using Javascript

javascript

css

focus

hover