CSS

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


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

See the Pen select original design / css,html tips by natsumi (@mayo31) on CodePen.18228

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

  1. appearance:none;でデフォルトのデザインを消す!
  2. labelを下地にしてボーダーや矢印をスタイリングする!
  3. selectの幅と高さをlabelと揃えて、上に重ねる!

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

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

2016/02/18追記

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

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

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメント

  1. select {font-size:10.5pt; color:blue; background-color:#ffcc00;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*Firefox用*/
    text-indent: .01px;
    text-overflow: “”;
    }
    /*IE対応*/
    select::-ms-expand {
    display: none;
    }

    1. そうですね~
      昔と違ってどんどんブラウザの実装が更新されていくので、ほんとなら差異がなくなってくれると嬉しいのですが・・・
      むしろreset.cssやnormalize.cssの指定だけではピクセルパーフェクトは実現しにくくなってきましたね

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です