considérons la sortie finale rendue à l'utilisateur de ce que nous voulons réaliser: une zone de texte rembourrée avec une bordure et un rembourrage, dont les caractéristiques sont qu'en cliquant, elles passent le focus à notre zone de texte, et l'avantage d'une largeur automatique de 100% typique des éléments de bloc.
La meilleure approche à mon avis est d'utiliser autant que possible des solutions de bas niveau, pour atteindre le maximum de support des navigateurs. Dans ce cas, le seul HTML pourrait fonctionner correctement, en évitant l'utilisation de Javascript (que nous aimons de toute façon).
La balise LABEL vient dans notre aide car a un tel comportement et est autorisée à contenir les éléments d'entrée auxquels elle doit s'adresser. Son style par défaut est celui des éléments en ligne, donc, donnant à l'étiquette un style d'affichage de bloc, nous pouvons nous prévaloir de la largeur automatique de 100%, y compris le rembourrage et les bordures, tandis que la zone de texte intérieure n'a pas de bordure, pas de rembourrage et une largeur de 100% .
En examinant les spécificités du W3C, nous pouvons remarquer d'autres avantages:
- aucun attribut "for" n'est nécessaire: lorsqu'une balise LABEL contient l'entrée cible, elle concentre automatiquement l'entrée enfant lorsqu'elle est cliquée;
- si une étiquette externe pour la zone de texte a déjà été conçue, aucun conflit ne se produit, car une entrée donnée peut avoir une ou plusieurs étiquettes.
Voir les spécificités du W3C pour des informations plus détaillées.
Exemple simple:
.container {
width: 400px;
border: 3px
solid #f7c;
}
.textareaContainer {
display: block;
border: 3px solid #38c;
padding: 10px;
}
textarea {
width: 100%;
margin: 0;
padding: 0;
border-width: 0;
}
<body>
<div class="container">
I am the container
<label class="textareaContainer">
<textarea name="text">I am the padded textarea with a styled border...</textarea>
</label>
</div>
</body>
Le remplissage et la bordure des éléments .textareaContainer sont ceux que nous voulons donner à la zone de texte. Essayez de les modifier pour les styliser comme vous le souhaitez. J'ai donné un remplissage et des bordures larges et visibles à l'élément .textareaContainer pour vous permettre de voir leur comportement lorsque vous cliquez dessus.