CODEWITHSUNDEEP
csswordpresswebformscontact-form-7
topcats
topcats

Reputation: 35

Radio label background color when checked in Contact Form 7

I am having issues making the background color change when an option is clicked on an CF7 form with radio buttons. Basically, I need the background color to change when the option is ‘checked’. So when clicking on Option 1, it needs to stay red (for example) until Option 2 is clicked. I can’t seem to select the label to do this.

HTML

<span class="wpcf7-form-control-wrap ra-kies-onderdeel">
  <span class="wpcf7-form-control wpcf7-radio">
    <span class="wpcf7-list-item first">
      <label>
        <input type="radio" name="ra-kies-onderdeel" value="Roetfilter">
        <span class="wpcf7-list-item-label">Option 1</span>
      </label>
    </span>
    <span class="wpcf7-list-item last">
      <label>
        <input type="radio" name="ra-kies-onderdeel" value="Katalysator">
        <span class="wpcf7-list-item-label">Option 2</span>
      </label>
    </span>
  </span>
</span>

CSS

input[type="radio"] {
    display: none;
}
label {
    display: block;
    width: 100%;
    background-color: #ddd;
    padding: 16px;
    margin-bottom: 20px;
    cursor:pointer;
    font-family: Arial;
    font-size: 16px;
}

http://codepen.io/anon/pen/XNYjQJ

Changing the HTML is not an option unfortunately, and I would rather not use jQuery for this.

Thanks!

Upvotes: 0

Views: 4037

Answers (2)

topcats
topcats

Reputation: 35

I figured it out, solved it with the following CSS:

input[type="radio"] {
  display: none;
}

.wpcf7-list-item-label {
  display: block;
  width: 100%;
  background-color: #ddd;
  padding: 16px;
  margin-bottom: 20px;
  cursor: pointer;
  font-family: Arial;
  font-size: 16px;
}

input[type=radio]:checked + .wpcf7-list-item-label {
  background-color: red;
}

Upvotes: 2

FllnAngl
FllnAngl

Reputation: 576

Image of radiobuttons with changed colors

This technique uses the label element bound to hidden input elements, that receiving a :checked state will change the appearance of the :before pseudo element:

CSS:

/* COMMON RADIO AND CHECKBOX STYLES  */
input[type=radio],
input[type=checkbox]{
/* Hide original inputs */
visibility: hidden;
position: absolute;
}
input[type=radio] + label:before,
input[type=checkbox] + label:before{
height:12px;
width:12px;
margin-right: 2px;
content: " ";
display:inline-block;
vertical-align: baseline;
border:1px solid #777;
}
input[type=radio]:checked + label:before,
input[type=checkbox]:checked + label:before{
background:gold;
}

/* CUSTOM RADIO AND CHECKBOX STYLES */
input[type=radio] + label:before{
border-radius:50%;
}
input[type=checkbox] + label:before{
border-radius:2px;
 }

Html:

<input type="radio" name="r" id="r1"><label for="r1">Radio 1</label>
<input type="radio" name="r" id="r2"><label for="r2">Radio 2</label>

<input type="checkbox" name="c1" id="c1"><label for="c1">Check 1</label>
<input type="checkbox" name="c2" id="c2"><label for="c2">check 2</label>

I hope this helps :)

Upvotes: 0

Related Questions