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