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

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

textareaのサイズ変更(拡大/縮小)を禁止する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

サイズ変更可能なtextarea

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

スポンサードリンク

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

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

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

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

サイズ変更できないtextarea

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

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

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

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

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

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

あとがき

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

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

参考になれば幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。