Comment puis-je faire une largeur TextArea 100% sans déborder lorsque le remplissage est présent dans CSS?

J'ai l'extrait CSS et HTML suivant en cours de rendu.

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>

Le problème est que la zone de texte finit par être 8px plus large (2px pour la bordure + 6px pour le remplissage) que le parent. Existe-t-il un moyen de continuer à utiliser border et padding mais de limiter la taille totale du textarea à la largeur du parent?

383
demandé sur captainsac 2008-11-07 05:35:23

14 réponses

Pourquoi pas? Oubliez les hacks et faites-le simplement avec CSS?

Un que j'utilise fréquemment:

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Voir le support du navigateur ici .

612
répondu Piet Bijl 2016-11-15 10:16:10

La réponse à de nombreux problèmes de formatage CSS semble être " ajouter un autre !"

Donc, dans cet esprit, avez-vous essayé d'ajouter un wrapper div auquel la bordure/le remplissage sont appliqués, puis de mettre le textarea 100% width à l'intérieur de cela? Quelque chose comme (non testé):

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>
71
répondu Dave Sherohman 2015-06-26 05:48:09

Considérons la sortie finale rendue à l'utilisateur de ce que nous voulons réaliser: une zone de texte rembourrée avec à la fois une bordure et un rembourrage, quelles caractéristiques sont que lorsqu'on clique ils passent le focus à notre zone de texte, et l'avantage d'une largeur automatique à 100% typique des éléments de bloc.

La meilleure approche à mon avis est d'utiliser des solutions de bas niveau autant que possible, pour atteindre le maximum de support des navigateurs. Dans ce cas, le seul HTML pourrait fonctionner correctement, en évitant l'utilisation de Javascript (que de toute façon nous aimons tous).

La balise LABEL vient dans notre aide car elle 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, en donnant à l'étiquette un style d'affichage de bloc, nous pouvons nous prévaloir de la largeur automatique de 100%, y compris le remplissage et les bordures, tandis que la zone de texte interne n'a pas de bordure, pas de remplissage et une largeur de 100%.

Jeter un oeil aux spécificités du W3C autres avantages que nous pouvons avis sont:

  • aucun attribut " for " n'est nécessaire: lorsqu'une balise LABEL contient l'entrée cible, elle focalise 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 W3C spécificités pour de plus amples informations.

Exemple:


<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>

<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> </html>

Le remplissage et la bordure du .éléments textareaContainer sont ceux que nous voulons donner au textarea. Essayez de les éditer pour le styliser comme vous le souhaitez. J'ai donné un grand rembourrage et des bordures visibles à la .élément textareaContainer pour vous permettre de voir leur comportement lorsque vous cliquez dessus.

19
répondu Emanuele Del Grande 2016-11-15 09:37:16

Si vous n'êtes pas trop dérangé par la largeur du rembourrage, cette solution gardera également le rembourrage en pourcentages..

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

Pas parfait, mais vous obtiendrez un peu de rembourrage et la largeur s'ajoute à 100%, donc tout va bien

15
répondu qui 2012-05-02 09:22:48

Je suis tombé sur une autre solution ici qui est si simple: ajouter padding-right au conteneur de textarea. Cela maintient la marge, la bordure et le remplissage sur la zone de texte, ce qui évite le problème que Beck a souligné à propos de la mise au point que chrome et safari mettent autour de la zone de texte.

Le padding-right du conteneur doit être la somme de la marge effective, de la bordure et du padding des deux côtés de la zone de texte, plus tout remplissage que vous pourriez souhaiter pour le conteneur. Si, pour le cas dans la question initiale:

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>
11
répondu Brian 2013-12-03 05:13:19

Ce code fonctionne pour moi avec IE8 et Firefox

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
8
répondu Jeff Guest 2016-02-22 13:03:25

Vous pouvez utiliser la propriété box-sizing, elle est prise en charge par tous les principaux navigateurs compatibles standard et IE8+. Vous aurez toujours besoin d'une solution de contournement pour IE7 cependant. Lire la suite ici .

5
répondu jzfgo 2016-11-15 10:35:18

Non, vous ne pouvez pas le faire avec CSS. C'est la raison pour laquelle Microsoft a initialement introduit un autre modèle de boîte, et peut-être plus pratique . Le modèle de boîte qui a finalement gagné, le rend danspratique pour mélanger les pourcentages et les unités.

Je ne pense pas qu'il soit correct avec vous d'exprimer les largeurs de remplissage et de bordure en pourcentage du parent aussi.

2
répondu buti-oxa 2008-11-07 05:26:12

Si vous le pad et le décalez comme ceci:

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

Le côté droit de La textarea parfaitement aligné avec le côté droit du conteneur, et, le texte à l'intérieur de la zone de texte s'aligne parfaitement avec le corps du texte dans le conteneur... et le côté gauche du textarea "dépasse" un peu. il est parfois plus joli.

1
répondu commonpike 2013-04-03 21:56:53

Utiliser boîte de dimensionnement de la propriété:

-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box;

Cela aidera

1
répondu user3074446 2014-08-03 09:30:34

Pour les personnes qui utilisent Bootstrap, textarea.le contrôle de formulaire peut également entraîner des problèmes de dimensionnement de textarea. Chrome et Firefox semblent utiliser des hauteurs différentes avec le CSS Bootstrap suivant:

textarea.form-conrtol{
    height:auto;
}
1
répondu Gwi7d31 2014-08-07 15:05:11

Que diriez-vous des marges négatives?

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}
0
répondu meustrus 2012-06-14 21:01:10

Je règle souvent ce problème avec calc(). Vous donnez simplement à la zone de texte une largeur de 100% et une certaine quantité de remplissage, mais vous devez soustraire le remplissage total gauche et droit de la largeur de 100% que vous avez donnée à la zone de texte:

textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

Ou si vous voulez donner une bordure à la zone de texte:

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}
0
répondu Jeroen Bellemans 2016-11-16 08:25:05

* {
    box-sizing: border-box;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}
<div class="container">
  <div class="row">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Your name..">
  </div>
  <div class="row">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">UK</option>
      <option value="canada">USA</option>
      <option value="usa">RU</option>
    </select>
  </div>    
  <div class="row">
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
  </div>
</div>
0
répondu antelove 2018-02-01 05:47:15