CSSでテキストエリアの大きさ変更を不可にする

textareaの右下の角にある斜めの2本線をドラッグし、そのままカーソルを動かすと、textareaを引っ張るようにして大きさを変更することができるが。この仕様を無効化することもできる。

textarea {
  resize: both; /* 縦横方向のリサイズを許可（デフォルト値） */
  resize: vertical; /* 縦方向のリサイズを許可 */
  resize: horizontal; /* 横方向のリサイズを許可 */
  resize: none; /* リサイズを禁止 */
}

resizeを許可すると無限に拡大できてしまうが、max-height・min-heightを指定することで最大・最小の高さを指定することができる（横方向の場合はmax-widthとmin-widthプロパティを使用する）。

textarea {
  resize: vertical; /* 縦方向のリサイズを許可 */
  max-height: 800px; /* 高さの最大値 */
  min-height: 100px; /* 高さの最小値 */

  resize: horizontal; /* 横方向のリサイズを許可 */
  max-width: 100%; /* 横幅の最大値 */
  min-width: 200px; /* 横幅の最小値 */
}

リサイズを不可にする場合は、合わせて最低限の高さ・横幅を設定しておく。
例えば何十行もの長文を入力するようなtextareaの場合、リサイズが不可＆縦幅が十分に足りていないと、ユーザーからすると文章が見にくくなってしまう。

textarea {
  resize: none;
  width: 100%;
  height: 300px;
}
inserted by FC2 system