Firefoxのデフォルトプルダウンデザインを消す！ #JavaScript

プルダウンは、ブラウザごとにデフォルトデザインがある。

<select name="defalt">
        <option label="選択してください" value="__unselected">選択してください</option>
        <option label="ショートケーキ" value="ショートケーキ">ショートケーキ</option>
        <option label="ティラミス" value="ティラミス">ティラミス</option>
        <option label="モンブラン" value="モンブラン">モンブラン</option>
        <option label="チーズケーキ" value="チーズケーキ">チーズケーキ</option>
    </select>

プルダウンのデザインをリセットする場合、以下のようなcssを書く。

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

これでデザインはリセットされる。

しかし、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: .01px; /*Firefox用*/
    text-overflow: ""; /*Firefox用*/
}

しかし！！！

少し前から、これでもFirefoxではリセットされなくなった。

ブラウザのバグじゃん？少ししたら直るんじゃん？って思ってたけど、やっぱり直すことになった。(´・ω・`)

いろいろ調べたら、様々な論争がされていたけれど、それもいつか動かなくなるかも…と思い、素直にjsで対応することにしました。

/*html*/
<div class="select js_pulldown">
    <select name="appearance_none">
        <option label="選択してください" value="__unselected">選択してください</option>
        <option label="ショートケーキ" value="ショートケーキ">ショートケーキ</option>
        <option label="ティラミス" value="ティラミス">ティラミス</option>
        <option label="モンブラン" value="モンブラン">モンブラン</option>
        <option label="チーズケーキ" value="チーズケーキ">チーズケーキ</option>
    </select>
    <span class="pulldownText js_pulldownText">選択してください</span>
</div>

/*css*/
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: "";
}
/*追加*/
.select{
    position: relative;
    width: 88px;
    height: 19px;
    border: 1px solid rgb(166, 166, 166);
}
.select select{
    opacity: 0;
    z-index: 10;
    position: relative;
    margin-bottom: 0;
}
.pulldownText{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 11px;
    line-height: 1.8;
    z-index: 1;
}

/*js*/
$(function(){
    $('div.js_pulldown select').change(function() {
        var selectedText = $(this).find('option:selected').text();
        $('span.js_pulldownText').text(selectedText);
    });
});

プルダウンはopacityが0になっているので、表示されない。
プルダウンはz-indexで表示されているテキストより上にあるので、クリックできる。
表示されているテキストはabsoluteで、プルダウンと同じ場所に重ねている。
jsでプルダウンを切り替えたら、表示されているテキストも切り替わるように制御している。

ざっと、こんな感じになります。

これなら、選択時にはちゃんと見えるし、特に問題ないかと思います。

あとは、ごにょごにょスタイル整えて、こんな感じにしたら完成です♪

もし、同じページに2つ以上のプルダウンがある場合は、

$('span.js_pulldownText').text(selectedText);

の部分を

$(this).next().text(selectedText);

に変えてあげれば、ひとつの記述でそれぞれ動きます。