selectにcssが適応されない

notSelect

スマートフォンサイトを作るときにセレクトボックスのレイアウトを修正する機会がありました。

↓こんなやつ

ただ、heightを指定しようが、background-colorを変更しようが

何も適用されない!!!

なんでだよ、なんでだよ。。。と思って調べてみるとあっさり解決しました。

↓ちなみに最初のコード

・html

・css

結論から言うと下の一行をcssに追加してあげることでデフォルトのselectの設定を初期化することが出来ました。

まとめると

・html(変更なし)

・css

selectのレイアウトを自分なりに変更したい場合は上記のようにするのもありですし

共通のcssに「-webkit-appearance:none;」を指定してあげて、全体のselectタグを初期化してあげるのもいいかもしれません。

勉強になりました-。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク