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

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

```html
<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>
```

![pulldown1.png](https://qiita-image-store.s3.amazonaws.com/0/34634/d2e603c3-155d-1e7b-003e-fc56cdcaf090.png)

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

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

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

![pulldown2.png](https://qiita-image-store.s3.amazonaws.com/0/34634/5b0b0f5a-7ec7-441e-f447-557aac3b49d9.png)

しかし、Firefoxではこれだけでは、以下のようになってしまう。

![pulldown3.png](https://qiita-image-store.s3.amazonaws.com/0/34634/fefaa059-114c-13be-59d2-08e6467514da.png)

なので、さらに追記する。

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


**しかし！！！**

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

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

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

```html
/*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
/*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;
}
```

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

![pulldown4.png](https://qiita-image-store.s3.amazonaws.com/0/34634/1936a84f-6665-e808-89e9-8e9805758c9d.png)

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

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

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

![pulldown5.png](https://qiita-image-store.s3.amazonaws.com/0/34634/81da8aa9-7c7b-727a-e759-ade6d0e8c1e5.png)

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

![pulldown6.png](https://qiita-image-store.s3.amazonaws.com/0/34634/00c56e0e-547e-f789-56de-bd5fc28347f4.png)



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

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

の部分を

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

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