今回は知っておくと便利なcssの小技 part14です。
テキストエリアの装飾について紹介します。
バックナンバー
テキストエリアのリサイズをさせない
テキストエリアの右下ですが、ブラウザによってはリサイズ用の領域がありますよね。リサイズをできると場合によってはレイアウトが崩れていやだ…なんてこともあるかもしれないのでこれを無効にする方法をご紹介します。
|
1 2 3 |
textarea.resizenone{ resize: none; } |
はい、こんな感じで『resize: none;』を指定するだけです。
これでリサイズは無効化されます。
DEMO
テキストエリアのフォーカス時の色を変える
テキストエリアにフォーカスしたときにつく色はブラウザによりますが大体青色とかそんな感じですよね。これをcssで変更することができます。
|
1 2 3 4 |
textarea:focus{ box-shadow: 0 0 5px #FF2626; border: 1px solid #FF2626; } |
こんな感じでtextareaの:focus要素に対してbox-shadowとborderを任意の色や色の広がりと一緒に指定してあげるだけです。
細かいところではあるのですが、サイトの雰囲気に合わせるだけで結構いい感じになります。
DEMO
