Select要素とFirefox
2013.12.10
以前このようなエントリを書きましたが、
久しぶりにselect要素の装飾について検索してみたところ、
Firefoxのselect要素に付くしつこいデフォルトスタイルを、
CSSのみで消し去る方法が書かれていました。

How to remove hide the <select> arrow in Firefox using

通常のアピアランスのクリアに加え、下記の2行を追加することで
あの憎き矢印を回避できるようです、これは期待が高まります。
------------
select {
 -moz-appearance: none;
 text-indent: 0.01px; ←コレと
 text-overflow: ''; ←コレ
}

------------

また、このままだとIE10で矢印が表示されてしまうので、
------------
select::-ms-expand {
 display: none;
}

------------
を加えることで対処できます。

この方法でselect要素を装飾してみたサンプルを、
いくつかの環境で表示させてみました。
select_sample01.gif
IE8に関してはまぁアレなのでアレとして、
PC版のFirefoxでは確かに矢印は消えています、素晴らしい。
しかし、ワタクシ的に一番期待していたAndroid版Firefoxでは
残念ながら効果がありませんでした...。
モジラさん、お願いしますよ。
| コメント(0)

コメントする

※JavaScriptが有効になっている必要があります




月別アーカイブ