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

2019年10月21日

スポンサードサーチ

セレクトボックスの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="送信する">
好きなジャニーズは？


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

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

お手本

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

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

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


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

html/css, ブログcss, セレクトボックス

Posted by penko