Indenter un Input type=checkbox

Bonjour,

J'ai une structure du genre :

<li class="un"><input type="checkbox" /><a>Texte plus ou moins long qui peut courir sur une ou plusieurs lignes selon taille écran</a></li>
<li class="deux">Autre texte plus ou moins long qui peut courir sur une ou plusieurs lignes selon taille écran</li>

Je veux simplement que l'input soit indenté.
Le code idéal serait :

li.un, li.deux {margin-left : largeur input + 5px}
li.un {text-indent : - (largeur input + 5px)}

Mon problème est que ce code est impossible à ma connaissance.

je peux y aller au pif :

li.un, li.deux {margin-left : 20px}
li.un {text-indent : -20px}

Mais la largeur de l'input va dépendre des navigateurs et du zoom du navigateur.
J'ai peur que ce soit plus ou moins moche selon les navigateurs et la valeur du zoom.

Je ne vois pas comment résoudre le problème sans changer la structure html.
Une structure de table permet d'y arriver mais je n'ai pas trop envie :

<tr><td rowspan="2"><input type="checkbox" /></td><td><a>Texte plus ou moins long qui peut courir sur une ou plusieurs lignes selon taille écran</a></td></tr>
<tr><td>Autre texte plus ou moins long qui peut courir sur une ou plusieurs lignes selon taille écran</td></tr>

J'espère avoir bien expliqué le problème.

Merci d'avance.
Modifié par boteha_2 (13 Oct 2017 - 19:47)

As tu jeter un oeil à calc() ?

li.un, li.deux {margin-left : calc(1em + 5px)}
li.un {text-indent : calc(-1em - 5px)}

https://codepen.io/anon/pen/qPMVeG
Modifié par gcyrillus (13 Oct 2017 - 19:59)

boteha_2 a écrit :
Merci de votre réponse.

Deux questions :

1) Comment sais-tu que la largeur d'un checkbox est de 1em ?
C'est standard ?

je ne le sais pas, em se réfère à la taille du texte , l'espace choisis resteras homogène.

La taille de ces éléments varient un peu d'un navigateur à l'autre et ne sont généralement pas dimensionné en fonction de la taille de la fonte et ne sont géneralement pas redimensionnable non plus.

boteha_2 a écrit :

2) Je peux chercher moi-même mais je me demande quel est le support de calc () par les navigateurs.

C'est aujourd'hui bien supporter. tu peut te faire une idée là : https://caniuse.com/#search=calc()
Modifié par gcyrillus (13 Oct 2017 - 23:13)

Bonjour,

Merci de tes réponses.

Mais si on ne connait pas la largeur exacte de l'input cela ne sera pas joli.

Bien sûr, un positionnement doit marcher :

li.un {position : relative}
li.un a, li.deux {margin-left : 20px}
input {position: absolute; left: 0; bottom: 0}

absolute est mieux que float afin de contrôler le positionnement vertical.
Mais c'est dommage de devoir faire appel à un positionnement pour quelque chose que tu voudrais faire avec text-indent.
Modifié par boteha_2 (14 Oct 2017 - 11:50)

Bonjour,

position: absolute pose des problèmes en responsive.

Avec float: left il semble semble que l'élément généré (input) participe à la mise en page.
C'est quelque chose que j'ignorais. Cette piste est donc mauvaise.

Je n'ai pas réussi à mettre en œuvre display: table.
Il faudrait pouvoir créer rowspan: 2 pour l'input et je n'ai pas trouvé comment faire.
Peut-être faut-il ajouter un bloc vide en ligne 2 mais je n'aime pas ce bricolage :

<li class="un"><input type="checkbox" /><a>Texte plus ou moins long qui peut courir sur une ou plusieurs lignes selon taille écran</a></li>
<li class="deux"><p></p><p>Autre texte plus ou moins long qui peut courir sur une ou plusieurs lignes selon taille écran</p></li>

ul {display : table}
li.un input, li.un a {display : table-cell}
li.deux p {display : table-cell}

Je ne vois comment une flexbox peut m'aider pour cela.

De façon pragmatique on obtient un résultat correct avec text-indent et une valeur de 23px ou 1.8em qui est très proche de l'espace occupé par input + un espace.
Quel que soit le zoom cela reste blen aligné avec Chrome ou IE, un peu moins bien avec Firefox.

<li class="un"><input type="checkbox" /> <a>Texte plus ou moins long qui peut courir sur une ou plusieurs lignes selon taille écran</a></li>
<li class="deux">Autre texte plus ou moins long qui peut courir sur une ou plusieurs lignes selon taille écran</li>

// Attention à l'espace après l'input.

li.un, li.deux {margin-left : 1.8em}
li.un {text-indent : -1.8em}

Si quelqu'un a une meilleure idée...
Modifié par boteha_2 (15 Oct 2017 - 19:13)

Bonjour,

Sur ce sujet il y a une discussion intéressante avec liens vers tuto Alsacréations.

Bonjour,

J'ai lu un peu partout qu'il est impossible de dimensionner un input[type="checkbox"] par les CSS.

Cependant ce code simple fonctionne sur les navigateurs récents que j'ai essayés : Firefox, IE, Chrome.

input[type="checkbox"] {width: 12px; height: 12px}

Cela résout mon problème car il est maintenant possible de calculer ma marge exactement.

<li class="un"><input type="checkbox" /><a>Texte plus ou moins long qui peut courir sur une ou plusieurs lignes selon taille écran</a></li>
<li class="deux">Autre texte plus ou moins long qui peut courir sur une ou plusieurs lignes selon taille écran</li>

// j'ai enlevé l'espace entre le checkbox et le lien

input[type="checkbox"] {width: 12px; height: 12px; margin: 0 7px 0 0; padding: 0}
li.un {margin-left: 20px; text-indent: -20px}
li.deux {margin-left: 20px}

12+7 = 19. J'ajoute 1px pour prendre en compte les bordures de l'imput ajoutées par le navigateur.
La valeur de 1 n'est pas entièrement satisfaisante mais à l’œil c'est mieux que 2px.
Je ne sais pas si les navigateurs gèrent les dixièmes de px.
De même, quelle est la largeur du filet de cadre de l'input ?

12px x 12px semble être la taille par défaut pour input[type="checkbox"]
Donc si des navigateurs n'appliquent pas la taille demandée l'indentation devrait quand même ne pas être horrible.

Un avantage de fixer la taille de l'input par CSS est que celle-ci va s'adapter au zoom du navigateur.
Autrement la taille du chexkbox reste fixe quel que soit le zoom.
Modifié par boteha_2 (01 Nov 2017 - 16:03)