プルダウン（select）の見た目を思い通りにするCSS

プルダウン（select要素）がどうしても思い通りの見た目にならない！という悩みを抱えていたこともありました。
右の▼とかブラウザによっても見た目が違うし、色も変えられないし、なんなのよと。
結局は自分が未熟なんですねー。今はこんな感じで思い通りのデザインにしています。

ラッパーはlabelである必要はないんですが、なんとなくform要素の部品なのでlabelにしちゃいました。

というイメージです。
実際は親子要素なので重なってるっていうのは正確じゃないですが、イメージできればいいんです。

labelではなく、あくまでもselect自身のボディをクリックさせることがコツです。
以前はlabelを後に記述してみたり、:afterで▼を置いてそこだけクリックできなくなったりしていましたが…ずいぶんと簡単なことだったんだなぁ( ´ー｀)ﾌｩｰ．．．

2016/02/18追記

ずっとIE対応を無視していたんですが解説します。
IEの場合selectのデフォルトの矢印が残ってしまうので、これを消すために

::-ms-expand {
	display: none;
}

を追加します。
::-webkit-なんかもそうですが、独自実装のこういったセレクタは調査するのもめんどくさくて困りますね。
フォーム系のパーツは、単純にappearance:none;だけでは解決しないことが多いので大変( ´Д｀)=3 ﾌｩ

コメント（2件）