Form Sample   CSS

1. 1. 珍しいCSSの一行解説
2. 1-1. #form-sample label { 〜 }
3. 1-2. #submit:hover
4. 1-3. textarea:focus
5. 2. でも重そうだ

しばらく見ない内にCSSで色々できるようになっていた。たとえばinput[type="text"] { color:#333 }とか。見たままだけど全inputタグの内、type="text"の文字色だけが#333になる。下は色々詰め込んだサンプルです。
http://blonde.fam.cx/tmp/form/sample.html

1. 珍しいCSSの一行解説

以下私が3年前に知らなかった文言です。

1-1. #form-sample label { 〜 }

対象はid="form-sample"を持つタグ配下の全labelタグ。

1-2. #submit:hover

対象はid="submit"を持つタグのhover（オンカーソル）時。

1-3. textarea:focus

対象はtextareaのfocus（アクティブ）時。

2. でも重そうだ

あまり色々やりすぎると、遅いPCではブラウザが固まる勢いでレンダリングの負荷がかかります。focus毎に背景画を変えることもできるけど、画像を使いすぎるとPHSでアクセスしたとき読込がなかなか完了しません。ただボタンの背景画はなかなか良いなと。88*31ならボタンとして違和感が無いし、いわゆるバナー素材のサイズなので、自由度高く好きな画像を拾って来られます。またtype="image"だとCSS切り替えに対応できないけど、CSSで背景画として指定すれば対応できる。世の中便利になったもんだ。

speed / 2008.02.15 15:51