次の 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 ピクセル) 広くなることです。境界線とパディングを引き続き使用しながら、合計サイズをtextarea親の幅に制限する方法はありますか?
ハックを忘れて CSS だけでやってみませんか?
私がよく使うもの：
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ブラウザのサポートについては、こちらをご覧ください。
多くの CSS フォーマットの問題に対する答えは、「別の <div> を追加してください!」のようです。
それで、その精神で、ボーダー/パディングが適用されるラッパー div を追加してから、100% 幅のテキストエリアをその中に入れてみましたか? (未テスト) のようなもの:
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>達成したいことのユーザーにレンダリングされる最終的な出力を考えてみましょう: ボーダーとパディングの両方を持つパディングされたテキストエリア。クリックするとフォーカスがテキストエリアに渡され、自動 100% 幅の利点があります。ブロック要素の典型。
私の意見では、最善のアプローチは、可能な限り低レベルのソリューションを使用して、ブラウザーのサポートを最大化することです。この場合、HTML のみが正常に機能し、Javascript の使用を回避できます (いずれにせよ、私たちは Javascript を愛しています)。
LABEL タグは、そのような動作を持ち、アドレス指定する必要がある入力要素を含めることができるため、私たちの助けになります。デフォルトのスタイルはインライン要素のスタイルであるため、ラベルにブロック表示スタイルを指定すると、パディングと境界線を含む自動 100% 幅を利用できますが、内側のテキストエリアには境界線もパディングも幅 100% もありません。 .
W3C の仕様を見ると、他にも次のような利点があります。
詳細については、 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 要素のパディングとボーダーは、テキストエリアに与えたいものです。それらを編集して、必要に応じてスタイルを設定してみてください。.textareaContainer 要素に大きくて目立つパディングと境界線を付けて、クリックしたときの動作を確認できるようにしました。
パディングの幅についてあまり気にしない場合、このソリューションは実際にはパディングをパーセンテージでも維持します..
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
完璧ではありませんが、パディングが得られ、幅が 100% になるので、すべて問題ありません
ここで、非常に簡単な別のソリューションに出くわしました。テキストエリアのコンテナにパディングライトを追加します。これにより、テキストエリアのマージン、ボーダー、およびパディングが保持され、クロムとサファリがテキストエリアの周りに置くフォーカスハイライトについて 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>
このコードは、IE8 と Firefox で動作します
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
box-sizing プロパティを利用できます。これは、すべての主要な標準準拠ブラウザと IE8+ でサポートされています。ただし、IE7 の場合は回避策が必要です。詳細はこちらをご覧ください。
CSS ソリューションの代わりにインライン スタイリング ソリューションを探していましたが、レスポンシブ テキストエリアにはこれが最適です。
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
いいえ、CSS ではできません。これが、マイクロソフトが最初に別の、おそらくより実用的なボックス モデルを導入した理由です。最終的に勝利したボックス モデルでは、パーセンテージと単位を混在させることは実際的ではありません。
パディングとボーダーの幅を親のパーセンテージで表現しても問題ないと思います。
Bootstrap を使用している場合、textarea.form-control はテキストエリアのサイジングの問題にもつながる可能性があります。Chrome と Firefox は、次の Bootstrap CSS で異なる高さを使用しているようです:
textarea.form-conrtol{
height:auto;
}
ボックスのサイズ変更プロパティを使用:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
それは助けになる
マイナスマージンはどうですか？
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}