Bonjour,

J'ai suivi le tuto sur la personnalisation des checkbox en CSS (ici) et j'ai un souci de compréhension sur le placement de mes inputs.

ce que j'avais avant

Choix des agences : [ ] Levage [ ] Ouest [ ] Centre [ ] Bretagne [ ] Val de Loire [ ] Mayenne [Bouton Envoyer]

Donc tout sur la même ligne ce qui me convient tout à fait (en fait c'est même ce que je veux)

ce que j'ai après personnalisation CSS de mes checkbox

Choix des agences :
[ ] Levage
[ ] Ouest
[ ] Centre
[ ] Bretagne
[ ] Val de Loire
[ ] Mayenne
[Bouton Envoyer]

Donc saut de ligne à chaque input (ce n'est pas du tout ce que je veux)

J'avoue avoir du mal à capter les positionnements en CSS alors du coup un coup de main serait le bienvenu pour m'expliquer le pourquoi du comment.

Le code HTML :

<div class="form-check">
                Choix des agences :
                <input type=checkbox id=Levage name=levage>
                <label for=Levage>Levage</label>
                <input type=checkbox id=Ouest name=ouest>
                <label for=Ouest>Ouest</label>
                <input type=checkbox id=Centre name=centre>
                <label for=Centre>Centre</label>
                <input type=checkbox id=Bretagne name=bretagne>
                <label for=Bretagne>Bretagne</label>
                <input type=checkbox id="Val de Loire" name=valdeloire>
                <label for="Val de Loire">Val de Loire</label>
                <input type=checkbox id=Mayenne name=mayenne>
                <label for=Mayenne>Mayenne</label>
                <input type="submit" class="ui-button" name="bouton">
  </div>

Le CSS :

.form-check {
    --border: grey;
    --unckecked: lightgrey;
    --cursor: grey;
    --checked: #CE3632;
    --checked-cursor: #FFF;
    position: relative;
}

.form-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.form-check label {
    display: grid;
    grid-template-columns: 2em 4em;
    grid-template-areas: "checkbox label";
    gap: 0.7em;
    text-align: left;
}

.form-check label::before,
.form-check label::after {
    grid-area: checkbox;
    content: '';
    display: block;
    margin-top: .3em;
}

.form-check label::before {
    width: 100%;
    height: 1em;
    border-radius: 1em;
    background-color: var(--unckecked);
    border: solid 1px var(--border);
    transition : background-color .3s, border-color .3s, box-shadow .3s;
}

.form-check label::after {
    position: relative;
    width: calc(1em - 2px);
    height: calc(1em - 2px);
    left: 1px;
    top: 1px;
    border-radius: 50%;
    background-color: var(--cursor);
    transition : background-color .3s, transform .3s;
}

.form-check input[type="checkbox"]:checked + label::before{
    background-color: var(--checked);
    border-color: var(--checked);
}

.form-check input[type="checkbox"]:checked + label::after{
    background-color: var(--checked-cursor);
    transform: translateX(1em); 
}

.form-check input[type="checkbox"]:focus + label::before{
    box-shadow: 0 0 0 0.25em #ce373275;
    border-color: var(--checked);
}

Merci d'avance

iLtG

2 réponses


Vincent_LETB
Réponse acceptée

Bonjour,
Voici ce que j'aurais modifié :

-Ajouter un 'display:flex' à '.form-check';
-Modifier le 'grid-template-columns' par 'grid-template-columns: 2em auto;' dans '.form-check label' ( pour eviter d'avoir du texte sur 2 lignes);
-Ajouter un 'margin:0 5px;' pour espacer les input entre eux dans '.form-check label';
-Supprimer 'margin-top: .3em;' dans '.form-check label::before,.form-check label::after 'pour tout bien aligner

En esperant t'avoir aider

Bonjour et merci Vincent,

En effet je ne connaissais pas les flex et j'ai donc regardé le tuto sur les flexbox et ça m'a changé la vie :D

Donc, si un jour quelqu'un passe et s'intéresse au sujet, voici ce que j'ai modifié (en commentaires dans le code) :

.form-check {
    --border: grey;
    --unckecked: lightgrey;
    --cursor: grey;
    --checked: #CE3632;
    --checked-cursor: #FFF;
    position: relative;    
    // les 3 suivantes pour aligner centrer et justifier (le space around remplace du coup ton 'margin:0 5px;' dans '.form-check label')
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.form-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    // J'ai mis le paquet pour cacher les checkbox (un peu trop ?)
    left: -3000px;
    user-select:none;-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}

.form-check label {
    display: grid; cursor: pointer;
    // J'avais déjà mis en auto avant ton intervention le 4em c'était un test inutile
    grid-template-columns: 2em auto;
    grid-template-areas: "checkbox label";
    gap: 0.3em;
    padding: 0 10px;
}

.form-check label::before,
.form-check label::after {
    grid-area: checkbox;
    content: '';
    display: block;
    // Lui je le garde sinon le slider n'est pas du tout aligné avec le texte ;)
    margin-top: .3em;
}

.form-check label::before {
    width: 100%;
    height: 1em;
    border-radius: 1em;
    background-color: var(--unckecked);
    border: solid 2px var(--border);
    transition : background-color .3s, border-color .3s, box-shadow .3s;
    margin-right: 5px;
}

.form-check label::after {
    position: relative;
    width: calc(1em - 6px);
    height: calc(1em - 6px);
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background-color: var(--cursor);
    transition : background-color .3s, transform .3s;
}

.form-check input[type="checkbox"]:checked + label::before{
    background-color: var(--checked);
    border-color: var(--checked);
}

.form-check input[type="checkbox"]:checked + label::after{
    background-color: var(--checked-cursor);
    transform: translateX(1em); 
}

.form-check input[type="checkbox"]:focus + label::before{
    box-shadow: 0 0 0 0.25em #ce373275;
    border-color: var(--checked);
}

Merci encore pour le temps passé j'ai maintenant ce que je voulais

Si je savais mettre une image je pourrais montrer le avant - après ;)

La bonne journée

iLtG