Bonjour à tous,

J'ai un petit soucis en CSS et j'ai essayé plein de combinaisons possible sans arriver à le régler ni même à voir d'où venait le problème. Voyez plutôt : 

Les cases créées en CSS ne s'alignent pas avec le texte (ou l'inverse d'ailleurs...) Et je suis incapable de trouver comment remédier à cela.

Voici mon CSS :

input[type=checkbox] {
	display: none;
}

label {
	background-color: RGBa(255,193,63,0.5);
	vertical-align: top;
	display: inline-block; /* inline-block augmentera la hauteur du label pour que le background s'affiche jusqu'où la case va */
}

input[type=checkbox] + label::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid RGBa(255,193,63,1);
  background-color: RGBa(255,193,63,0.2);
  margin: 3px;

}

input[type=checkbox]:checked + label::before {
  content: ""; /* \2713 \f00c */
  color: #ffffff;
  width: 15px;
  height: 15px;
  border: 1px solid RGBa(255,193,63,0.2);
  background-color: RGBa(255,193,63,1);

}

Et au cas où, mon HTML. J'ai défini des classe mais à vrai dire, ici elles ne servent à rien (j'ai vérifié et y'a aucun conflit, au niveau de mon CSS, elles n'existent pas)

<input type="checkbox" name="category[]" id="4" value="4" />
<label class="checkbox" for="4">Film photography</label>
<input type="checkbox" name="category[]" id="2" value="2" />
<label class="checkbox" for="2">Germany</label>
<input type="checkbox" name="category[]" id="1" value="1" />
<label class="checkbox" for="1">Portraits</label>
<input type="checkbox" name="category[]" id="3" value="3" />
<label class="checkbox" for="3">Travel</label>

Merci pour votre aide

Bonjour,

l'alignement vertical entre du texte et un élément à hauteur fixe c'est toujours périlleux… Sauf avec le module flexbox (qui est vraiment un sauve-la-vie) :

display: inline-flex;
align-items: center;

sur tes <label> à la place de l'inline-block et des vertical-align, et ça roule tout seul (enlève aussi sur le ::before).

Hello,

J'ai édité ton fiddle ici.

J'ai utilisé une position relative sur le label, joué avec son padding et mis le :before en position absolute (ce qu'on fait couramment avec ce genre d'élément).

Edit : Grillé par Lamecarlate, mais ma solution marche aussi ! 

-
Edité par MrChampy 16 mai 2018 à 15:08:34

Salut,

Tu peux mettre un vertical-align:middle; comme ceci :

input[type=checkbox] + label::before {
  vertical-align:middle;
}

Tiens-nous au courant !

Edit: Doublement grillé ! Tu as désormais l'embaras du choix !

-
Edité par Offkors 16 mai 2018 à 15:13:25

Merci pour vos réponses à tous les trois.

@offkors = vertical-align j'avais déjà essayé mais sans succès hélas

@Lamecarlate = ton astuce marche plutôt bien à un détail près que j'utilise le caractère "✔" (pas dans le script que je vous ai donné, donc pas de souci). Et donc quand il s'affiche, il est un peu cropé.

@MrChampy = ta version marche bien aussi mais hélas un peu trop tweaké à mon gout.

Au final, j'ai trouvé une manière de faire qui me convient.

J'ai changé mon display en display: inline;

input[type=checkbox] + label::before {
  content: "";
  display: inline;
  width: 15px;
  height: 15px;
  border: 1px solid RGBa(255,193,63,1);
  background-color: RGBa(255,193,63,0.2);
  margin: 3px;

}

Faire ça m'a aligné les éléments mais ma case n'était plus qu'un simple trait - normal étant donné que son contenu est nul. J'ai donc mis un caractère que j'ai rendu transparent quand il n'est pas coché.

input[type=checkbox] + label::before {
  content: "\2713";
  color: RGBa(255,193,63,0);
  display: inline;
  width: 15px;
  height: 15px;
  border: 1px solid RGBa(255,193,63,1);
  background-color: RGBa(255,193,63,0.2);
  margin: 3px;
}

Et ça marche du tonnerre. Je dois encore tester sur mobile mais ça devrait passer.

Je sais pas si ça vous le fait à vous aussi. Vous passez 2 jours à trouver une solution par vous même ou en cherchant sur internet. Vous vous décidez enfin à demander de l'aide. Et en attendant les réponses, vous cogitez et arrivez à trouver la raison et résoudre le problème tout seul comme un grand.

Bref merci pour votre réactivité !

> Vous passez 2 jours à trouver une solution par vous même ou en cherchant sur internet. Vous vous décidez enfin à demander de l'aide. Et en attendant les réponses, vous cogitez et arrivez à trouver la raison et résoudre le problème tout seul comme un grand.

Ça s'appelle - plus ou moins - le théorème du canard en caoutchouc (ou rubber duck) Le fait d'exprimer son problème, de devoir l'expliciter pour une autre personne, nous le fait souvent voir d'une autre manière… et parfois, on trouve la solution comme ça !

Bonne continuation !