エンジニア的な技術的なブログ

webエンジニアの開発の知見を書きます。PHP、javascript、postgres、mysql、あと多少のインフラ周りとか。

selectタグの矢印がfirefoxだけ消えない問題を解決する

 

CSSデザインで、オシャレなプルダウン(selectタグ)を作ろうとすると

こんな感じになるはず。。。

 

>|css|

select{

    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;

}

||<

 

firefoxでデフォルトの矢印を消すと、

f:id:fujita222:20140822131501p:plain

 

こんな感じに逆三角の矢印マークが残ります。

これを消したい...

 

 

そんな時はこれ。

 

selectタグに下記のオレンジを追加しましょう

 

 

>|css|

select{

    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    text-indent: .01px; /*Firefox用*/
    text-overflow: ""; /*Firefox用*/

}

||<

 

結果はこうなった。

 

f:id:fujita222:20140822132007p:plain

 

うん、おっけ!

 

 

より詳しい内容はこっちのブログにと、、

 

CSS3のappearanceプロパティを使ってフォームのselect要素を装飾する | Rapid Progress