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

Question

单击时，我需要帮助在.wpcf7列表项元素上添加边框颜色。我尝试过：焦点&：处于活动状态，并且它仍然不显示边界。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伪元素，并为其应用边框。

请注意，您需要确保：：before元素的父项具有position: relative样式，使其位置：绝对并拉伸以填充其整个父元素。。

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