Firefoxのデフォルトプルダウンデザインを消す！
13294 ワード
プルダウンは、ブラウザごとにデフォルトデザインがある。
<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);
に変えてあげれば、ひとつの記述でそれぞれ動きます。
Author And Source
この問題について(Firefoxのデフォルトプルダウンデザインを消す！), 我々は、より多くの情報をここで見つけました https://qiita.com/mimoe/items/04d700d4140cd5150d5a著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .