Partage

Checkbox personnalisées

Mauvais alignement ...

Sujet résolu
16 mai 2018 à 15:01:17

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 :)



Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
Staff 16 mai 2018 à 15:07:30

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 :p (enlève aussi sur le ::before).

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
16 mai 2018 à 15:08:04

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 ! :p

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

16 mai 2018 à 15:09:47

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 :D !

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

16 mai 2018 à 16:44:10

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é !

Staff 16 mai 2018 à 17:06:14

> 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 !

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

Checkbox personnalisées

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown