J’ai l’extrait suivant de HTML restitué.
Il s’agit de mon CSS :
C’est que le problème est que la zone de texte finit par être 8px plus large (2px pour border) + 6px pour padding que le parent. Y a-t-il un moyen de continuer à utiliser la bordure et remplissage, mais limiter la taille totale de la `` à la largeur du parent ?
Pourquoi pas ? Oubliez les hacks et faites-le avec CSS ?
Celui que j’utilise fréquemment :
Support du navigateur : http://caniuse.com/css3-boxsizing
La réponse à de nombreux problèmes de mise en forme CSS semble être « ajoute un autre ! »
Ainsi, dans cet esprit, avez-vous essayé ajoutant un div wrapper auxquels s’appliquent la bordure/remplissage, puis le mettre la zone de texte largeur de 100 % à l’intérieur de qui ? Quelque chose comme (non testé) :
considérons la finale de la sortie du rendu à l'utilisateur de ce que nous voulons atteindre: un collier textarea avec à la fois une frontière et un rembourrage, dont les caractéristiques sont que les visiteurs cliquent-ils passer le focus à notre textarea, et l'avantage d'une boîte automatique à 100% de la largeur typique des éléments de bloc.
La meilleure approche, à mon avis, est d'utiliser des solutions au niveau autant que possible, pour atteindre le maximum de navigateurs prennent en charge. Dans ce cas, les seules HTML pourrait fonctionner très bien, en évitant l'utilisation de Javascript (qui de toute façon nous avons tous l'amour).
La balise d'ÉTIQUETTE vient à notre aide, parce qu'a un tel comportement et qu'il est autorisé à contenir les éléments d'entrée qu'elle doit traiter. Son style par défaut est l'un des éléments inline, donc, de donner à l'étiquette d'un bloc d'affichage de style, nous pouvons nous prévaloir de l'automatique 100% de largeur, y compris rembourrage et des frontières, tandis que l'intérieur textarea n'a pas de frontière, pas de rembourrage et un 100% de largeur.
En prenant un coup d'oeil à la W3C spécificités d'autres avantages, nous remarquons:
Voir W3C spécificités pour des informations plus détaillées: http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1
Exemple Simple:
<html>
<head>
<style type="text/css">
.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; }
</style>
</head>
Le rembourrage et la frontière du .textareaContainer éléments sont ceux que nous voulons donner à la textarea. Essayez de modifier leur style comme vous le souhaitez. J'ai donné les grandes et visibles de rembourrage et les frontières .textareaContainer élément pour vous permettre de voir leur comportement lorsque l'utilisateur clique dessus.
Je suis tombé sur une autre solution ici est donc simple: ajouter un padding-right pour le textarea du conteneur. Cela permet de maintenir la marge, bordure, et le rembourrage sur le textarea, ce qui évite le problème que Beck a souligné à propos de l'accent mis en évidence que chrome et safari mis autour de la textarea.
Le conteneur padding-right devrait être la somme de l'effectif de la marge, de la frontière, et le rembourrage sur les deux côtés de la textarea, en plus de toute rembourrage vous pourriez vouloir pour le conteneur. Ainsi, pour le cas dans la question d'origine:
textarea{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
.textareacontainer{
padding-right: 8px; /* 1 + 3 + 3 + 1 */
}
<div class="textareacontainer">
<textarea></textarea>
</div>
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
