web-dev-qa-db-ja.com

CSSのwidth/heightまたはHTMLのcols/rows属性を使用してテキストエリアのサイズを変更する必要がありますか？

textareaを含む新しいフォームを開発するたびに、その寸法を指定する必要があるときには、次のようなジレンマがあります。

_ css _ またはtextareaの属性colsおよびrows？を使用します。

各方法の長所と短所は何ですか？

これらの属性を使用する意味は何ですか？

それは通常どのように行われますか？

htmlcsstextarea
268
Raúl Ferràs

両方を使用することをお勧めします。クライアントがCSSをサポートしていない場合は、行と列が必要で便利です。しかし、デザイナーとして、私は自分が望むサイズになるようにそれらを上書きします。

推奨される方法は、外部スタイルシートを使用することです。

textarea {
  width: 300px;
  height: 150px;
}
<textarea> </textarea>
236
kogakure

HTMLセット内

<textarea rows="10"></textarea>

CSSセットで

textarea { height: auto; }

これにより、ブラウザはtextareaの高さを行数とその周囲の余白に正確に設定します。 CSSの高さを正確なピクセル数に設定すると、任意の空白が残ります。

79
Jan Werkhoven

W3cによると、colsとrowsは両方ともテキストエリアに必須の属性です。行数と列数は、ピクセルやその他の潜在的に任意の値ではなく、テキスト領域に収まる文字数です。行/列に移動します。

10
Explosion Pills

答えは「はい」です。つまり、両方を使用する必要があります。行と列がない場合（および明示的に使用しない場合でもデフォルト値があります）、CSSが無効になっている場合、またはユーザースタイルシートによってオーバーライドされている場合、textareaは使用できないほど小さくなります。アクセシビリティの問題を常に念頭に置いてください。そうは言っても、スタイルシートでテキストエリアの外観を制御できる場合、通常は全体的に見た目が良く、ページ全体のデザインにうまくフィットするものになりますandサイズを変更できますユーザーの入力に遅れないようにします（もちろん、良い味の範囲内で）。

5
Stan Rogers

テキストエリアのサイズはcolsとrows属性で指定することができます。 CSSのheightおよびwidthプロパティを通じて。 cols属性はすべての主要ブラウザでサポートされています。主な違いの1つは、<TEXTAREA ...>がコンテナタグであることです。開始タグ（）があります。

3
AsifQadri
 <textarea style="width:300px; height:150px;" ></textarea>
2
user470962

テキスト領域の場合、サイズを修正するために以下のCSSを使用できます

    <textarea  class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>

angularjsおよびangular7でテスト済み

2
Rohit Parte

毎回使用しない場合はline-height： '..'を使用してください。プロパティはtextareaの高さを制御し、widthはtextareaの幅を制御します。

あるいは、cssに従うことでfont-sizeを利用することができます。

#sbr {
  font-size: 16px;
  line-height:1.4;
  width:100%;
}
1
Nurealam Sabbir

私は通常heightを指定しませんが、width: ...とrowsとcolsを指定します。

通常、私の場合は、テキストエリアが他の要素と比較してNiceに見えるようにするために必要なのはwidthとrowsだけです。 （そして他の答えで説明されているように、誰かがCSSを使用していなければcolsは代替となります。）

（（rowsとheightの両方を指定することは、私が思うに、データを複製することに少し似ていますか？）

1
KajMagnus

テキストエリアの大きな特徴は、それらが拡張可能であるということです。 Webページでは、テキストの長さが設定したスペースを超えると、テキスト領域にスクロールバーが表示されることがあります（行を使用している場合やCSSを使用している場合など）。 PDFへの 'printing' - 条件付きCSSルールを使用して、印刷されたテキストエリアに快適に大きい最小の高さを設定します。

@media print { 
textarea {
min-height: 900px;  
}
}
0
Geoff Kendall