How to change background colour of radio button on click (Contact form 7)

Question

I'm trying to change the background color of the radio button on click (contact form 7)

HTML Code (Contact form 7)

<label class="form-label" for="HomeDescription1">
<span class="wpcf7-form-control-wrap HomeDescription">
<span class="wpcf7-form-control wpcf7-radio form-radio-btn" id="HomeDescription1">
</span>
</span>
<span>Single Family</span>  
</label>

and here is the CSS Code

.form-radio-btn {
    opacity: 0;
}

.form-label {
    position: relative;
    background-color: green;
    padding: 50px 20px;
    display: inline-block;
    cursor: pointer;
    width: 100%;
}

.form-radio-btn:checked + .form-label {
    background-color: red;
}

by default, it should show green color which is working fine but on click, it should change the color to red which is not working

Can anyone tell me what am I doing wrong?

Answer 1

First, make sure you have added the radio buttons in the following way in you contact form 7 shortcode:

[radio your-radio-btn default:1 "Radio 1" "Radio 2" "Radio 3"]

Then, use the following css code. Please also refer to this quick js fiddle that I wrote.

.wpcf7-form-control.wpcf7-radio {
    position: relative;
}

/* Container */
.wpcf7-list-item {
  display: block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wpcf7-list-item input[type='radio'] {
  opacity: 0;
  position: absolute;
  z-index: 9;
  top: .7em;
  left: 1em;
}

/* On mouse-over, add background color */
.wpcf7-list-item input[type="radio"] + span::before {
  background-color: #2ad587;
  transition: background 0.5s linear;
    -webkit-transition: background 0.5s linear;
}

input[type="radio"] + span::before {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0px 12px;
  vertical-align: middle;
  cursor: pointer;
  border: solid 2px #666;
  border-radius: 50%;
  text-align: center;
  content: '';
  transform: scale(0.8);
}

input[type="radio"]:checked + span::before {
  content: "\2713";
  color: #fff;
  width: 38px;
  height: 38px;
  border: solid #666;
  background-color: red;
}

Here is how it looks on my side: