Couleur d'arrière-plan de l'étiquette radio lors de l'enregistrement dans le formulaire de contact 7

Question

Je n'arrive pas à modifier la couleur d'arrière-plan lorsqu'une option est cliquée sur un formulaire CF7 avec des boutons radio. Fondamentalement, j'ai besoin de la couleur de fond pour changer lorsque l'option est 'cochée'. Donc, en cliquant sur l'option 1, il doit rester rouge (par exemple) jusqu'à ce que l'option 2 soit cliquée. Je n'arrive pas à sélectionner l'étiquette pour le faire.

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

Changer le code HTML est pas une option, malheureusement, et je préfère ne pas utiliser jQuery pour cela.

Merci!

Answer 1

Image of radiobuttons with changed colors

Cette technique utilise l'élément label lié à des éléments input cachés, que la réception d'un état :checked va changer l'apparence de l'élément :before pseudo:

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> 

J'espère que cela aide :)

Answer 2

j'ai tout compris, résolu avec le CSS suivant:

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; 
}