a

formの中によくあるtextarea。テキストエリアには要素自体のリサイズ機能が内包されていますが、画像にあるように、昔から居る割にめったに使われない機能だから消したいとおもいます。まさかとは思いますがリサイズを良く使うケースがある場合は、”お問い合わせ”や”ユーザー情報入力画面”諸々で概ね体験を損ねている可能性が高いです。

テキストエリアのリサイズを消す方法

さて本題ですが、リサイズをさせない方法としては、2010年ごろから使えるようになったCSSプロパティを用います。今では各モダンブラウザで動作しているので、テキストエリアの体裁を整えたいときに利用するのがいいですね。最近はform脱却の動きも加速してて、割りと知られてないかも。記述はこちら

textarea {
  resize: none;
}

特に利用することはなかろうかと思いますが、リサイズ方向の制御値がいくつかあります。resize-CSS3リファレンス

resize: none | both | horizontal | vertical | inherit

DEMO

右下に居た、引き伸ばすヤツがいなくなっています。

ソースコード

<textarea style="resize: none; cols="40" name="text" rows="4"></textarea>

プレビュー

余談ですが、昔から居てめったに使われなかった機能…

officeアシスタントの存在を思い出しました。

お前を消す方法-thumb-500x424-7967

宣伝:プッシュ通知解析SDK – GrowthPush 光の早さでアップデート頑張っています!