Select要素のpaddingと、最近知ったタグ

いまだに鼻から汚染水が流出し続けているYu-ichiです

水ガラスを鼻に注入したいくらいです。

さて、長年HTMLに触れているのに、最近まで知らなかったタグがありました。
それが<optgroup>というタグです。

セレクトボックスを使った際に、その中に記述するoptionをまとめることができます。

例えば・・・

【ホームページ制作プラン】会社紹介向けA会社紹介向けBネットショップAネットショップBカスタムプランポータルサイト【ショッピングサイト作成プラン】小規模ショップ中規模ショップ大規模ショップ

<br />
&lt;select&gt;<br />
&lt;option selected=&quot;selected&quot;&gt;【ホームページ制作プラン】&lt;/option&gt;<br />
&lt;option&gt;会社紹介向けA&lt;/option&gt;<br />
&lt;option&gt;会社紹介向けB&lt;/option&gt;<br />
&lt;option&gt;ネットショップA&lt;/option&gt;<br />
&lt;option&gt;ネットショップB&lt;/option&gt;<br />
&lt;option&gt;カスタムプラン&lt;/option&gt;<br />
&lt;option&gt;【ショッピングサイト作成プラン】&lt;/option&gt;<br />
&lt;option&gt;小規模ショップ&lt;/option&gt;<br />
&lt;option&gt;中規模ショップ&lt;/option&gt;<br />
&lt;option&gt;大規模ショップ&lt;/option&gt;<br />
&lt;/select&gt;<br />

というものを今までやっていましたが、<optgroup>タグを使うとこんなにスッキリできます。

会社紹介向けA会社紹介向けBネットショップAネットショップBカスタムプランポータルサイト

小規模ショップ中規模ショップ大規模ショップ

<br />
&lt;select&gt;<br />
&lt;optgroup label=&quot;【ホームページ制作プラン】&quot;&gt;<br />
&lt;option&gt;会社紹介向けA&lt;/option&gt;<br />
&lt;option&gt;会社紹介向けB&lt;/option&gt;<br />
&lt;option&gt;ネットショップA&lt;/option&gt;<br />
&lt;option&gt;ネットショップB&lt;/option&gt;<br />
&lt;option&gt;カスタムプラン&lt;/option&gt;<br />
&lt;/optgroup&gt;<br />
&lt;optgroup label=&quot;【ショッピングサイト作成プラン】&quot;&gt;<br />
&lt;option&gt;小規模ショップ&lt;/option&gt;<br />
&lt;option&gt;中規模ショップ&lt;/option&gt;<br />
&lt;option&gt;大規模ショップ&lt;/option&gt;<br />
&lt;/optgroup&gt;<br />
&lt;/select&gt;<br />

余計なものを選択されたくないときに便利ですね。
いや～、恥ずかしながら最近知りました

それと、<option>の間隔をあけようとpaddingを設定したのですが
Firefoxではちゃんと間隔が開くのですが、IEだと無視されてしまうようです。

font-sizeやfont-weightなどは使えるのですが、一部のスタイルだけダメなようです

このブラウザ依存の問題・・・なんとかなりませんかねぇ

次回はもう１つブラウザ依存の問題について書きたいと思います。