optgroup 要素を CSS でひと工夫してみる | WWW WATCH

フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな... フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな時のために optgroup 要素が存在するわけですが、こいつを使用した上で、CSS をあてて見た目を装飾する方法と、一部ブラウザでの注意点などを簡単にまとめてみました。 基本的なことのみで、すごいかっこいい見た目を実現とかそういうのではありませんので、期待せずにどうぞ。 例えば都道府県などの選択をさせる際を想定すると、マークアップ自体はこんな感じになりますよね。面倒なので全部は書きませんが。 <select name="location"> <optgroup la

[webmarksjp]

css

[picnicgraphic]

Fxなどでは背景画像も表示できる・optgroup要素へのborderやpadding指定が反映/Operaはoptgroup要素のlabel属性値をデフォルトだと白い文字色で書き出すので注意。

[erf]

セレクトフォームを見やすくカスタマイズ。

[mooiboom]

フォームのセレクトメニューをわかりやすくする。

[B-SAKATU]

optgroup 要素を使いやすく

[moqada]

selectの要素をグループ化するoptgroupについて

[kyorecoba]

"select"の子要素として指定

[eclucifer]

optgroup 要素でグループ化されたセレクトメニューを CSS で判りやすく装飾する。

[lomo_lomo]

長くなったセレクトメニューをCSSでわかりやすくグループ化する

[asiamoth]

これは基本として押さえておかないといけないわけだな……。

[webmugi]

　Opera注意！

[miyanavi]

うっ・・・