Étoiles de révision CSS pure pour formulaire de contact 7 (CSS3 ~ version tilde)

Question

En utilisant le formulaire de contact 7 Je veux être en mesure d'avoir un formulaire de contact avec étoiles de révision, Formulaire de contact 7 pour WordPress ne supporte pas les étoiles de révision, mais il prend en charge les entrées radio, qui est la route que je prends car je préfère utiliser cette méthode pour éviter d'avoir à utiliser JavaScript, WP Plugins ou mods pour les fichiers plugin. Obtenir des entrées radio pour apparaître comme des étoiles et les faire se comporter d'une manière collante est normalement simple grâce à la sélection CSS3 ~, mais parce que j'utilise le formulaire de contact 7, il introduit un conteneur autour de chaque entrée et étiquette travail habituel ~, cela brise la sélection collante.

J'ai essayé d'ajouter le parent en plus mais pas de chance, j'espère que quelqu'un de nouveau peut repérer le problème.

J'ai ajouté le code à un jsFiddle with both working and not working versions, ou si vous préférez, vous pouvez jeter un oeil au code ci-dessous.

Voici le code HTML:

<span class="wpcf7-form-control wpcf7-radio"> 
    <span class="wpcf7-list-item first"> 
     <input name="radio-489" type="radio" value="One Star"> 
     <span class="wpcf7-list-item-label">One Star</span> 
    </span> 
    <span class="wpcf7-list-item"> 
     <input name="radio-489" type="radio" value="Two Stars"> 
     <span class="wpcf7-list-item-label">Two Stars</span> 
    </span> 
    <span class="wpcf7-list-item"> 
     <input name="radio-489" type="radio" value="Three Stars"> 
     <span class="wpcf7-list-item-label">Three Stars</span> 
    </span> 
    <span class="wpcf7-list-item"> 
     <input name="radio-489" type="radio" value="Four Stars"> 
     <span class="wpcf7-list-item-label">Four Stars</span> 
    </span> 
    <span class="wpcf7-list-item last"> 
     <input checked="checked" name="radio-489" type="radio" value="Five Stars"> 
     <span class="wpcf7-list-item-label">Five Stars</span> 
    </span> 
</span> 

Et voici le CSS pour aller avec elle:

.wpcf7-radio { 
    overflow: hidden; 
    display: inline-block; 
    font-size: 0; 
    position: relative; 
} 

.wpcf7-radio input { 
    float: right; 
    width: 16px; 
    height: 16px; 
    padding: 0; 
    margin: 0 0 0 -16px; 
    opacity: 0; 
} 

.wpcf7-radio:hover .wpcf7-list-item-label:hover, 
.wpcf7-radio:hover .wpcf7-list-item-label:hover ~ .wpcf7-list-item .wpcf7-list-item-label, 
.wpcf7-radio input:checked ~ .wpcf7-list-item .wpcf7-list-item-label { 
    background-position: 0 0; 
} 

.wpcf7-list-item-label, 
.wpcf7-radio:hover .wpcf7-list-item-label { 
    position: relative; 
    display: right; 
    float:left; 
    width: 16px; 
    height: 16px; 
    background: url('https://www.bybe.net/files/jsfiddle/stars.png') 0 -16px; 
} 

Answer 1

Comme je sais CF7, vous pouvez définir la forme HTML selon vos besoins, de sorte que vous êtes en mesure d'écrire un code plus simple:

<span class="wpcf7-form-control wpcf7-radio"> 
    <input name="radio-489" type="radio" value="One Star" id="onestar"> 
    <input name="radio-489" type="radio" value="Two Star" id="twostar"> 
    <input name="radio-489" type="radio" value="Tre Star" id="trestar"> 
    <span class=stars></span> 
    <label for=onestar>One Star</label> 
    <label for=twostar>Two Star</label> 
    <label for=trestar>Tre Star</label> 

</span> 

Cela permettra de montrer des étoiles avec css seulement. Comme ceci:

input[type=radio] { display: none; } 
input[type=radio] ~ .stars { display: block; background:url(star.png) repeat-x; } 
input[type=radio][value=one]:checked ~ .stars { width: 10px; } 
input[type=radio][value=two]:checked ~ .stars { width: 20px; } 

Answer 2

Si HTML ne peut pas changer, il y a une autre solution (moins jolie):

input[type=radio]:checked + span:after { position: absolute; bottom: 0; left: 0; } 
// here add styles according to input value 
.wpcf7-form-control wpcf7-radio { position: relative; } 

cette façon, les éléments pseudo-:after seront tous situés sur un même lieu (en bas à gauche du bloc) et un seul sera visible (après :checked entrée)