Comment le style de la mère de l'étiquette d'un contrôle de la radio d'entrée

Une possibilité

Lors de mon temps de poster, je ne suis pas exactement sûr de ce que la mise en page souhaitée devrait être, mais il y a un problème spécifique à la tentative de CSS qui doit être abordée.

De la côté des frères et sœurs sélecteur:

... sépare les deux sélecteurs et correspond au second élément uniquement si il suit immédiatement le premier élément.

Si le <input> est un enfant de la <label>, il n'est pas adjacent, donc:

label.radio input[type="radio"]:checked + label

est à la recherche d'un label immédiatement à la suite d'une :checked input à l'intérieur d'un label avec la classe .radio, et rien de tout cela n'existe.

De modifier le style de la label dans ce cas, aurait besoin d'un sélecteur qui a affecté le parent, qui n'est actuellement pas possible.

Donc, pour sélectionner le label de la :checked input, nous avons besoin de la label à côté, pas le parent.

Nous pouvons utiliser la for="id" l'attribut:

Un <label> peut être associé à un contrôle, soit en plaçant l'élément de contrôle à l'intérieur de la <label> élément, ou en utilisant le for attribut.

Comme je l'ai dit, je ne suis pas exactement sûr de ce que la mise en page souhaitée devrait être, mais voici un exemple d'utilisation de la for attribut, qui n'a pas l'air trop mauvais.

CSS:

div {
display: inline-block;
position: relative;
}
label {
background: #fcb608;
padding: 2px 10px 2px 1.5em;
border: 1px solid transparent; /* keeps layout from jumping */
}
input {
position: absolute;
}
input[type="radio"]:checked + label {
background: #000;
border-color: green;
color: white;
}

HTML:

<div>
<input id="id1" type="radio" name="ad_caroserie" value="0"><label for="id1" class="radio">Berlina</label>
</div>
<div>
<input id="id2" type="radio" name="ad_caroserie" value="1"><label for="id2" class="radio">Break</label>
</div>
<div>
<input id="id3" type="radio" name="ad_caroserie" value="2"><label for="id3" class="radio">Cabrio</label>
</div>

Avec <input> comme un enfant de <label>

L'aide d'un petit JavaScript gestionnaire l'écoute pour les changements à la <form>.

• Si un change est détecté, le déclenchée fonction vérifie si un <input type="radio"> a été changé, et si oui, si il a un <label> comme son parentElement.
• Si c'est vrai, il vérifie pour voir si il y a un nom identique <input type="radio"> qui est un enfant d'un <label> élément avec la class .checked.
• Si il y est, il supprime le class de la <label> avant d'appliquer la même class à la <label> parent de l' <input> target qui a déclenché toute l'affaire.

JS:

let form = document.querySelector( "form" );
form.addEventListener( "change", ( evt ) => {
let trg = evt.target,
trg_par = trg.parentElement;
if ( trg.type === "radio" && trg_par && trg_par.tagName.toLowerCase() === "label" ) {
let prior = form.querySelector( 'label.checked input[name="' + trg.name + '"]' );
if ( prior ) {
prior.parentElement.classList.remove( "checked" );
}
trg_par.classList.add( "checked" );
}
}, false );

CSS:

label {
background: #fcb608;
padding: 2px 10px 2px 0;
border: 1px solid transparent; /* keeps layout from jumping */
}
label.checked {
background: #000;
border-color: green;
color: white;
}

HTML:

<form>
<label class="radio"><input type="radio" name="ad_caroserie" value="0">Berlina</label>
<label class="radio"><input type="radio" name="ad_caroserie" value="1">Break</label>
<label class="radio"><input type="radio" name="ad_caroserie" value="2">Cabrio</label>
</form>

Sans JavaScript les choses deviennent difficiles (par mon explication de pourquoi il est préférable d'utiliser le for attribut dans ce cas).

Nous pouvons utiliser la apparence de la propriété (avec des préfixes et la prise en charge raisonnable) pour mieux cacher le user-agent radio GUI, puis utilisez le reste de l' sans visage élément de construire un faux background pour la <label>.

C'est très hacky et beaucoup moins dynamique que la valeur par défaut, puisque certains absolute le positionnement et les dimensions spécifiques sont nécessaires pour le retirer.

Ce type de travaux (dans la plupart des navigateurs), mais est difficile à appliquer au niveau du site.

Quelque chose à jouer avec si 🙂

CSS:

input {
position: absolute;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 5em;
height: 1.5em;
z-index: -1;
background: #fcb608;
border: 1px solid transparent;
margin: -.1em -.8em;
outline: 0;
}
label {
display: inline-block;
width: 5em;
color: white;
text-shadow: 1px 1px 0px black;
}
input[type="radio"]:checked {
background: #000;
border-color: green;
}

HTML:

<label class="radio"><input type="radio" name="ad_caroserie" value="0">Berlina</label>
<label class="radio"><input type="radio" name="ad_caroserie" value="1">Break</label>
<label class="radio"><input type="radio" name="ad_caroserie" value="2">Cabrio</label>

Après avoir essayé tant de fois avec du pur HTML et CSS. Je suis régler avec cette solution simple avec JavaScript. Je pense que cela va aider.

JS:

function check(btn) {
let label = btn.children;
label[0].checked = true;
}

CSS:

.lib-radio {
color: #1e1e1e;
font-size: 1.0em;
border-radius: 31px;
font-weight: 400;
width: 450px;
height: 40px;
border: 2px solid black;
padding: 0.5em;
font-family: Lato;
margin: 10px 0 0 0;
}
.lib-radio:hover {
background-color: #000;
color: #FFF;
}

HTML:

<div class="lib-one-input">
<p class="lib-form-label">Select your gender</p>
<div class="lib-radio" onclick="check(this)">
<input id="s1yes" type="radio" name="mcq1" value="male">
<label for="s1yes"> Yes, our researchers authored it</label><br />
</div>
<div class="lib-radio" onclick="check(this)">
<input id="s1no" type="radio" name="mcq1" value="female">
<label for="s1no"> No, we didn&#39t author it </label><br />
</div>
</div>