主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

Selectboxのcssが効かない問題

http://i.gyazo.com/4dda3ee5b50b7417acf9b3b7c5f6d1ac.png

なんか見て見ぬふりしてたけども、セレクトボックスめっちゃちっさいなーってずっと思っていて、開発ツールとかで高さだけでも、と思ってちょっとさわってもぜんぜんスタイルが効かないんです。

最初 Chrome のせいにしてたんですが、Firefoxで見てもまったく同じセレクトボックスだったので、あれっと思って、少し調べてみたら、Yosemite から変わってるっぽいです。

参考:HTML - YosemiteのセレクトボックスにCSSでスタイルを充てるとどうなるのか - Qiita

昔はブラウザごとにフォームの体裁が違ってたけど、最近はOSの方が強いんでしょうか。。

セレクトボックスは、ボーダーとか指定したら高さが効くというよりも、フォームを初期化しないと高さが変えられないっぽいです。

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

参考:selectにcssが適応されない