FirefoxでCSSが動作しないカスタム選択

Question

選択ボックスの右隅にあるボタン（矢印を下に）を変更したいとします。 CSSより

<div class="buscaSelect"> 
    <select name="oper"> 
     <option value="value1">Value 1</option> 
     <option value="value2">Value 2</option> 
    </select> 
</div> 

：私のHTMLは、このようなものです

サファリで

.buscaSelect { 
    display: inline-block; 
    margin: 18px 0px 0px 0px; 
    width: 120px; 
    height: 27px; 
    border-radius: 0px; 
    overflow: hidden; 
    background: white url("btnSelect.png") no-repeat right center; 
} 

.buscaSelect select { 
    padding: 4px; 
    width: 100%; 
    border: none; 
    box-shadow: none; 
    background: transparent; 
    background-image: none; 
    -webkit-appearance: none; 
} 

、結果は完璧で、デフォルトボタンが "btnSelect.png" によって変更されていますが、Firefoxで（58.0b9 ）、デフォルトのボタンはまだボタンの上に重なっています。デフォルトのボタンの幅が狭くなると、ボタンのコーナーが後ろに現れます...結果はひどいです！

Firefoxのデフォルトボタンを無効にして、自分だけを表示するにはどうすればよいですか？

Answer 1

私はあなたがこれを探していると思います。私はside.Theのwebkitの登場により、ドロップダウンで、ドロップダウン矢印側なしの両方の比較を与えている：どれもFirefoxとChromeでうまく動作しませんが、IEのためにあなたがこれを使用する必要があるかもしれません：

select::-ms-expand { 
    display: none; 
} 

.buscaSelect { 
 
    display: inline-block; 
 
    margin: 18px 0px 0px 0px; 
 
    width: 120px; 
 
    height: 27px; 
 
    border-radius: 0px; 
 
    overflow: hidden; 
 
    background: white url("btnSelect.png") no-repeat right center; 
 
} 
 

 
.buscaSelect select { 
 
    padding: 4px; 
 
    width: 100%; 
 
    border: none; 
 
    box-shadow: none; 
 
    background: transparent; 
 
    background-image: none; 
 
    -webkit-appearance: none; 
 
} 
 

 
#noarrow { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    text-indent: 1px; 
 
    text-overflow: ''; 
 
} 
 
select::-ms-expand { 
 
    display: none; 
 
}

<div class="buscaSelect"> 
 
    <select name="oper" id="noarrow"> 
 
     <option value="value1">Value 1</option> 
 
     <option value="value2">Value 2</option> 
 
    </select> 
 
</div> 
 
<div class="buscaSelect"> 
 
    <select name="oper"> 
 
     <option value="value1">Value 1</option> 
 
     <option value="value2">Value 2</option> 
 
    </select> 
 
</div>