web-dev-qa-db-ja.com

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

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

問題は、テキスト領域の幅が親よりも8倍広くなることです（境界線の場合は2ピクセル、パディングの場合は6ピクセル）。ボーダーとパディングを使い続けるが、textareaname__の合計サイズを親の幅に制限する方法はありますか？

htmlcssstylesheet
400
Eric Schoonover

何故なの？ハックを忘れるだけでCSSでそれをやる？

私がよく使うのは

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

ブラウザサポート ここ を参照してください。

633
Piet Bijl

多くの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>
73
Dave Sherohman

ユーザーに表示される最終出力 を実現したいと考えてみましょう。ボーダーとパディングの両方を持つパディングされたテキストエリア、クリックされたことでテキストエリアにフォーカスが移るという特性ブロック要素の典型的な自動100％幅の。

私の意見では最善のアプローチは、最大限のブラウザサポートに到達するために、可能な限り低レベルのソリューションを使用することです。この場合、Javascriptを使用しなくても（唯一のHTMLが問題なく動作します）、問題なく動作します。

LABELタグはそのような振る舞いをしており、それがアドレス指定しなければならない入力要素を含むことが許されているので私たちの助けになります。デフォルトのスタイルはインライン要素のスタイルなので、ラベルにブロック表示スタイルを指定すると、内側のテキストエリアには境界、境界、および100％の幅は含まれません。 。

私たちが気づくかもしれないW3C仕様その他の利点を見てみると：

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

より詳しい情報は W3Cの仕様 を参照。

簡単な例：


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

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

19
Emanuele Del Grande

あなたが余りにもパディングの幅に悩まされていないのであれば、この解決策は実際にはあまりにもパーセンテージでパディングを保つでしょう..

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

完璧ではありませんが、いくらかのパディングがあり、幅は最大100％になるので、すべてうまくいきます。

15
qui

私は別の解決策に出会いました ここ それはとても簡単です：textareaのコンテナにpadding-rightを追加します。これにより、テキスト領域の余白、境界線、および余白が維持されます。これにより、Beckがクロムとサファリがテキスト領域の周囲に置いたフォーカスの強調表示について指摘した問題を回避できます。

コンテナのパディング権は、テキスト領域の両側の有効マージン、ボーダー、およびパディングの合計に、それ以外の場合はコンテナに必要なパディングを加えたものになります。したがって、元の質問の場合については、

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

このコードは私のためにIE8とFirefoxで動作します

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
8
Jeff Guest

あなたはbox-sizingプロパティを利用することができます、それはすべての主要な標準準拠のブラウザとIE 8 +でサポートされています。あなたはまだIE7のための回避策が必要になります。もっと読む ここ 。

5
jzfgo

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

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

2
buti-oxa

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

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>
1
Jee Mok

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

textarea.form-conrtol{
    height:auto;
}
1
Gwi7d31

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

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

textareaの右側はコンテナの右側と完全に整列しています。 と textareaの内側のテキストはコンテナの本文と完全に整列しています...そしてtextareaの左側は '突き出ています'ビット。それは時々きれいです。

1
commonpike

ボックスサイズ設定プロパティを使用する ：

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

それは役立ちます

1
user3074446
* {
    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
antelove

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

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

あるいは、テキストエリアに境界線を付けたい場合は、

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}
0
Jeroen Bellemans

マイナスのマージンはどうですか？

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}
0
meustrus