概要

textarea 要素を作成した際に、以下のようにユーザーがテキストエリアのサイズを自由に変更できる機能が提供されております。しかし、これがウェブページのレイアウトに影響を与える場合や、特定のデザインを実装するためには、この伸縮ボタンを非表示にしたい場合もあります。それを実現するための方法をご紹介致します。

解決法

以下のようにtextarea 要素にresizeのプロパティを入れることで解決致します。

textarea {
  resize: none;
}

上記のコードは、すべての textarea 要素に対して伸縮ボタンを非表示に設定します。resize: none; は、ユーザーが要素のサイズを変更することを禁止します。

参考

textareaの右下の伸縮ボタンを1行で消す