【CSS3】図形描画とz-indexでselectを装飾

☆selectの装飾方法

selectの見た目をリッチにするのは案外めんどくさいが、やり方は大体以下の通りだ。

1. selectの背景画像を用意してはめ込む
2. cssのみでそれっぽくする(現状、モダンブラウザにしか適応できない)

※jQueryのプラグインとかあるので、そちらを参考にするのも良いと思います。

☆俺はcssのみでいくぜ

• 画像をはめる場合には、カスタマイズが面倒くさそう。
• ブラウザが対応してなければ、selectが装飾されない残念な事にはなるのだけれど、残念なブラウザを使っている側に責任を擦り付けるスタンスで望むものとしよう。

☆んで、作ってみたのがコレ

☆ポイント

○css

1. 下三角形の描画
   • こちらを参考に作成
2. selectのstyle設定
   • "-webkit-appearance:none;"
     • アピアランスを無効化(selectのデフォルトの見た目を排除)
   • "background:transparent"
     • 背景を透明化(下三角の上側[z-index]にselectを配置するので透明にする必要がある)

○html

//selectを装飾する構造は以下のようになっている。
<div style="position:relative;">
    <div style="position:relative;z-index:1">
        //select定義
    </div>
    <div class="triangle_down" style="position:absolute;top:7px;left:69px"></div>
</div>

1. 最初のdivタグ
   • triangle_downのabsoluteに対するrelativeを設定
2. 2番目のdivタグ
   • 下三角の図形より上側に設定するためにz-index:1を設定。z-indexを設定するにはpositionがstatic以外でなければならないので、relativeを渋々セット
3. 3番目のdivタグ(class="triangle_down")
   • position:absoluteにてtopとleftで下三角の位置調整(強引)

※chromeで見ると良い感じなのだけれど、ios(safari)で見ると三角の描画位置がズレるなぁ…

ではでは。