textareaのサイズ変更(拡大/縮小)を禁止する方法

お問い合わせフォーム等のWebフォームに必ずと言って良い程設置されるtextareaですが、デフォルトの状態だと入力欄をユーザー側でサイズ変更することができるようになっています。

textareaの右下をドラッグすることで、入力欄を拡大/縮小できます。

このサイズ変更を無効化して、指定した横幅と高さに固定する方法をご紹介いたします。

textareaのサイズ変更(拡大/縮小)を禁止する方法

CSSで以下のように指定します。

textarea {
  resize: none;
  width: 400px;
  height: 200px;
}

「resize:none;」を指定することで、右下にあったサイズ変更のマークが消え、拡大/縮小することができなくなります。

高さだけは変更できるようにしたい場合

「resize:none;」を指定すると、横幅も高さも調整できなくなりますが、高さだけは調整可能にしたいというケースでは、以下のように「resize:vertical;」を指定します。

textarea {
  resize: vertical;
  width: 400px;
  height: 200px;
}

横幅だけは変更できるようにしたい場合

逆に横幅だけを調整可能にしたい場合は、「resize:horizontal;」を指定します。

textarea {
  resize: horizontal;
  width: 400px;
  height: 200px;
}

あとがき

ユーザー側でサイズ変更できることで、レイアウトの崩れが発生する場合もありますので、理由がない限りはtextareaのリサイズは禁止しておいた方が良いと思います。

上述したように、横方向だけ許可するとか、縦方向だけ許可する方法もありますので、状況に合わせて柔軟に対応できますね。

参考になれば幸いです。