Change Border Color on div without button using Javascript

Question

I need help in adding a border color on a .wpcf7-list-item element when clicked. I've tried :focus & :active and it doesn't display the border still. The ff. are the codes I have:

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

This can be achieved via CSS alone. You can use a ::before pseudo-element for the :checked radio button and apply a border to that.

Note that you need to ensure the parent item has position: relative styling for the ::before element to be position: absolute and stretched to fill its entire parent element..

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