Firefoxのデフォルトプルダウンデザインの初期化

2018.08.28

htmlでのそのままのセレクトボックスのデザインは味気ないものです。

そこでcssを使って背景を変えたりなどのデザイン調整をする場合

select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: none transparent;
    vertical-align: middle;
}

select{

-webkit-appearance:none;

-moz-appearance:none;

appearance:none;

border-radius: 0;

margin: 0;

padding: 0;

background: none transparent;

vertical-align: middle;

}

クロームやIEなどでは上記のような記述で大丈夫ですが、これだけではFireFoxではリセットできません

ですので、

select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: none transparent;
    vertical-align: middle;
    text-indent: 0.01px;
    text-overflow: "";
}