セレクトボックスの実装の基本のキ

セレクトボックスのCSS実装に思いの外時間がかかった

セレクタってどうやるんだっけ？と調べて、

<p>好きなジャニーズは？</p>
    <select name="selectidol">
        <option value="who">選択してください</option>
        <option value="V6">V6</option>
        <option value="arashi">嵐</option>
        <option value="jump">HeySayJUMP</option>
        <option value="kinpuri">king＆Prince</option>
    </select>
    <input type="submit" value="送信する">

    選択してください    V6    嵐    HeySayJUMP    king＆Prince

うん。パーツとしては理解した。

そこで、私が読み込んでお世話になっている、ふるさんのブログを参考に、東急リバブルのセレクトボックスを見様見真似で実装することにします。

CSSに苦手意識はそこまでなかったので、作る前はざっくりと頭の中に実装イメージはあったのだけどいざやっていみると「divで囲うべき範囲」がわからなくなりました。。
selectに直接スタイルを指定するのか、それだけをdivで囲むのか。 結果、囲んでselectにはwidth100%指定して・・

こうなりました。
なんか、若干違う・・　細かい色は別として、ピクセルパーフェクトにはなってないですね。
”選択してください”と”OK”が上下真ん中に来てない・・。

エディタのコピペがうまく行かないのでコードが載せれないし・・.

今回、OKは画像が使われていてbackgroundで背景として表示してあります。
私だったらここは文字でやる・・今回のやり方はちょっと保留で次に行きます。（ええっ・・）