Pixelog

リセットCSSで消え去ったselectのスタイルを元に戻す

by yussy on

リセットCSSといえば、destyle.cssとかnormalize.cssとかress.cssなどいろいろあります。

当ブログではressを使っているのですが、これを当てると<select>のデフォルトスタイルにくっついている、右端の三角マークのアレ（▼）が消えます。

このブログで利用する分には、これは消えて欲しくなくて、ress本体の該当部分をコメントアウトしてしまおう、とも考えたのですが、それはそれで保守が大変になるので、上書きで元に戻してみることにしました。

解決策

select {
    -moz-appearance: menulist-button;
    -webkit-appearance: menulist-button;
    appearance: menulist-button;
}

こんな感じでCSSを当ててやれば三角が表示されます。

ベンダープレフィックスが無いと、AndroidのChromium系ブラウザで見た時に適用されていなかったので（Chromeは未確認）、書いておいた方が良さげです。

appearanceプロパティについて調べると、HTMLクイックリファレンスの記事が検索に出てきて、そこでプルダウンのスタイル値はpop-up-menuだと書かれていますが、デベロッパーツールではinvalidになってしまい全く効果がありません。最終更新がいつなのか書いてないのでよく分からないですが古い記事なのだろうか。

ともかく、appearanceは仕様が流動的っぽいので注意が必要です。