知っておくと便利なcssの小技 part14(テキストエリア編)

  • はてブ

今回は知っておくと便利なcssの小技 part14です。
テキストエリアの装飾について紹介します。

バックナンバー


テキストエリアのリサイズをさせない

img01 テキストエリアの右下ですが、ブラウザによってはリサイズ用の領域がありますよね。
リサイズをできると場合によってはレイアウトが崩れていやだ…なんてこともあるかもしれないのでこれを無効にする方法をご紹介します。


はい、こんな感じで『resize: none;』を指定するだけです。
これでリサイズは無効化されます。

DEMO

style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">


テキストエリアのフォーカス時の色を変える

img02 テキストエリアにフォーカスしたときにつく色はブラウザによりますが大体青色とかそんな感じですよね。
これをcssで変更することができます。



こんな感じでtextareaの:focus要素に対してbox-shadowborderを任意の色や色の広がりと一緒に指定してあげるだけです。
細かいところではあるのですが、サイトの雰囲気に合わせるだけで結構いい感じになります。

DEMO

8bit

執筆者: 8bit

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ