textareaのサイズ調整ではみ出したりするのをCSSで修正する

textarea（テキストエリア）の右下をドラッグしてサイズ調整した場合、はみ出したり小さくなりすぎて見栄えが悪いのをCSSで修正する方法です。

textareaがはみ出す

WordPressのコメント欄やContact Form 7を使ったお問い合わせページなど、ウェブサイトの入力フォームで詳細を記入するのにtextareaは使用されます。

textareaは右下をドラッグでサイズを調整できますが、大小ともに一定以上にすると見栄えが悪いですしユーザビリティもよくありません。

修正するCSS

textarea {
    max-width: 100%;
    min-width: 100%;
    min-height: 100px;
}

「max-width: 100%」で横サイズがはみ出ないようにします。

「min-width: 100%」で横サイズを小さくできないようにします。

「min-height: 100px」で高さを100px以下にできないようにします。

以下が実際に適用したテキストボックスです。