CSSにパディングが存在する場合、オーバーフローせずにTextAreaの幅を100％にするにはどうすればよいですか？

426

次のCSSおよびHTMLスニペットがレンダリングされています。

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>
スニペットを展開

問題は、テキスト領域が親よりも8px広くなる（境界線の2px +パディングの6px）ことです。境界線とパディングを引き続き使用しながら、の合計サイズをtextarea親の幅に制限する方法はありますか？

html  css  stylesheet 
— エリック・スクーンオーバー
ソース
ところですることにより、このために良い記事があるジェフリー・ウェイここtutsplus上：net.tutsplus.com/tutorials/html-css-techniques/...多分それは助ける誰かが;）
— 誰かが

回答:

664

ハックを忘れて、CSSでそれを実行してみませんか？

私が頻繁に使用するもの：

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

こちらのブラウザサポートをご覧ください。

— ピエト・バイル
ソース
22
これがうまくいったとは信じられません。しかし、そうでした。CSSはこれほど簡単ではありません。:-)
— ネイトバード
1
これは、私がしばらく見つけた中で最もクールなものの1つになるはずです。ありがとう、IE7でもこれを行う方法はありますか？
— ジェレミーA.ウェスト
47
なお、border-boxと共にwidth：100％を使用する必要があることに注意してください。
— タイラー
3
Internet Explorerの古いバージョンは枠線ボックスの動作のみを使用していませんか？
— Peter Hedberg 2013
3
誰かがこれを説明してください、このクラスはどこに行きますか？textareaを囲むdiv？
— koolaang
81

多くのCSSフォーマットの問題に対する答えは、「別の<div>を追加する！」

それで、その精神で、ボーダー/パディングが適用されるラッパーdivを追加して、その中に100％幅のtextareaを配置しようとしましたか？（テストされていない）のようなもの：

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>
スニペットを展開

— デイブ・ヒーローマン
ソース
1
幅の使用をやめることになりました。あなたのアプローチも同様にうまくいくと思います。ありがとう！
— Eric Sc​​hoonover、
5
「。」を追加することを忘れないでください。textwrapperクラスに。
— Chris Porter
3
@Chris：ありがとう、修正されました。誰かがそれをキャッチするのにほぼ1年半かかったとは、私は穏やかに驚いています...
— Dave Sherohman
2
この場合、textareaのスクロールバーはどのように見えますか？
— Daniel LeCheminant、2010
1
クロムでは、textarea要素にフォーカスすると、自動的に強調表示され、divラッパーのパディングを作成すると、このパディングが表示され、そのため2つの境界線が表示されます。1つはハイライトから、もう1つは.textwrapper border：1px solid＃999999からです。
— 誰かが
22

私たちが達成したいもののユーザーにレンダリングされる最終的な出力を考えてみましょう：ボーダーとパディングの両方を備えたパディングされたテキストエリア、クリックされたときにテキストエリアにフォーカスが渡されるという特徴、および自動100％幅の利点典型的なブロック要素。

私の意見では、最良のアプローチは、可能な限り低レベルのソリューションを使用して、ブラウザーの最大サポートに到達することです。この場合、唯一のHTMLは正常に機能し、JavaScriptの使用を回避します（いずれにせよ私たちはそれを愛しています）。

LABELタグは、そのような動作を持ち、アドレス指定する必要のある入力要素を含めることができるため、助けとなります。デフォルトのスタイルはインライン要素の1つであるため、ラベルにブロック表示スタイルを指定すると、パディングとボーダーを含む自動100％幅を利用できますが、内側のテキストエリアにはボーダーなし、パディングなし、100％幅があります。 。

私たちが気づくかもしれない他の利点であるW3Cの詳細を見てみましょう：

  • 「for」属性は必要ありません。LABELタグにターゲット入力が含まれている場合、クリックすると自動的に子入力にフォーカスします。
  • textareaの外部ラベルが既に設計されている場合は、特定の入力に1つ以上のラベルが含まれる可能性があるため、競合は発生しません。

詳細については、W3Cの仕様を参照してください。

簡単な例：

.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>
スニペットを展開

.textareaContainer要素のパディングとボーダーは、textareaに指定したいものです。それらを編集して、必要に応じてスタイルを設定してください。.textareaContainer要素に大きくて目に見えるパディングと境界線を付けて、クリックしたときの動作を確認できるようにしました。

— エマヌエーレデルグランデ
ソース
クロスブラウザーの何がここに潜んでいるかはわかりませんが、私はこのアプローチが気に入りました。+1
— HRJ
15

パディングの幅についてあまり気にしない場合、このソリューションは実際にパディングをパーセンテージで維持します。

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

完璧ではありませんが、いくつかのパディングが得られ、幅が100％になるため、すべて良好です

— qui
ソース
12

私はここでとても簡単な別の解決策に出くわしました：textareaのコンテナーにpadding-rightを追加します。これにより、textareaのマージン、境界線、パディングが保持され、Beckが、chromeとsafariがtextareaの周囲に配置したフォーカスハイライトについて指摘した問題が回避されます。

コンテナーのpadding-rightは、有効なマージン、境界線、textareaの両側のパディング、およびコンテナーに必要なパディングの合計です。したがって、元の質問の場合：

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>
— ブライアン
ソース
1
+1これは、CSS3ステートメントよりも多くのブラウザーで機能します。残念なことに、世界にはまだラッパーdivが必要です。
— BenSwayne、2012
私はこの答えが本当に好きです。100％未満のマジックパーセンテージの数値がなくても、textareaはスナップしてフィットします。ラッパーのすべての側面にパディングを使用して、テキスト領域を強制的に親の内部に移動して保持することができます。ラッパーでも最小高さと高さを100％にする必要があります。その後、textareaを同じパディングで100％に設定して、すべてが完璧に収まるようにします。
— justdan23 2018
9

このコードはIE8とFirefoxで動作します

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
— ジェフゲスト
ソース
Chromeでも動作しました。
— Sanjeev 2018年
5

box-sizingプロパティを利用できます。これは、すべての主要な標準準拠ブラウザーとIE8 +でサポートされています。ただし、IE7の回避策はまだ必要です。詳細はこちら。

— jzfgo
ソース
@DavidJohnstone：そして、あなたはもはやIE7以前のサイトを開発していないので、これがその解決策です:)
— Jonatan Littke
2

いいえ、CSSでそれを行うことはできません。これが、Microsoftが最初に別の、おそらくより実用的なボックスモデルを導入した理由です。最終的に勝ったボックスモデルでは、パーセンテージと単位を混在させることは現実的ではありません。

パディングとボーダーの幅を親のパーセンテージで表すことは、あなたには問題ないと思います。

— ブチオキサ
ソース
2

私はCSSソリューションではなくインラインスタイルのソリューションを探していましたが、これはレスポンシブテキストエリアに最適です。

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>
— ジーモック
ソース
1

このようにパディングしてオフセットすると：

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

テキストエリアの右側に完全にコンテナの右側に揃え、そして完全にコンテナ内の本文テキストとテキストエリアを揃える内のテキスト...とテキストエリアの左側には、ビットを「突き出し」。それは時々きれいです。

— コモンパイク
ソース
1

Bootstrapを使用する人にとって、textarea.form-controlもtextareaのサイズ設定の問題を引き起こす可能性があります。ChromeとFirefoxでは、次のBootstrap CSSで高さが異なるように見えます。

textarea.form-conrtol{
    height:auto;
}
— Gwi7d31
ソース
1

私はしばしばその問題をで修正しますcalc()。textareaに100％の幅と一定量のパディングを与えるだけですが、textareaに指定した100％の幅の左右のパディングの合計を差し引く必要があります。

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

または、textareaに境界線を付けたい場合：

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}
— ジェロエン・ベレマンス
ソース
0

負のマージンはどうですか？

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}
— 雌しべ
ソース
0 

* {
    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>
スニペットを展開

— アンテラブ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.