select要素
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)
select要素のデザイン
2013.08.14
select要素へのスタイルってFirefoxでは完全には効かないんですよね。
どうやってもデフォルトの▼が表示されてしまいやがります。
これはPCのFirefoxだけでなく、Android版Firefoxでも同じ。
-moz-appearance: none;
などと指定してもダメです、消えません。

この頑固な汚れはどうしようもないのかしら?
と思ってGoogle先生に訊ねてみると、
いくつかのForm装飾系jQueryプラグインに混じって
こんな記事が見つかりました。

CSS3でセレクトボックスをカスタマイズ

選択ボタンに見せかけたダミーのdiv要素の上に、
透過させたモノホンのselect要素を置くというもの。
そして選択した文字列はjsを通してダミー側に反映されます。
この非常にシンプルな構造のおかげで、
スマホや他のブラウザでも問題なく表示されます。
アイデアの勝利ですね、これは。

というかどうにかしてください、Firefoxさん。
| コメント(0)