-webkit-appearance：noneドロップダウンアイコンの問題

Question

Safariのドロップダウンスタイリングの問題を修正するには、-webkit-appearance：noneを追加しました。これにより、クロームなどのブラウザのドロップダウンアイコン（小さな下矢印）が削除されました。

これをどのように修正できますか？

Answer 1

例は、あなたのために：選択ボックスで

1）スタイル設定ドロップダウン

<div class="myBox"> 
    <select class="mySelect" name="currency"> 
    <option value="Please_select" selected> Please select</option> 
    <option value="aud">AUD</option> 
    <option value="usd">USD</option> 
    <option value="eur">EUR</option> 
    <option value="gbp">GBP</option> 
    <option value="jpy">JPY</option> 
    <option value="nzd">NZD</option> 
    </select> 
</div> 

.myBox{ 
    position: relative; 
    display: inline-block; 
    margin: 5px; 
} 
.myBox:after { 
    content: "▼"; 
    width: 25px; 
    height: 20px; 
    background:#fff; 
    display: block; 
    position: absolute; 
    text-align:center; 
    color:#999; 
    font-size:14px; 
    top: 5px; 
    right: 0; 
    z-index: 1; 
} 
.mySelect{ 
    border: 0; 
    background: #fff; 
    outline: none; 
    margin: 0; 
    padding: 5px; 
    min-width: 410px; 
    vertical-align: middle; 
    position: relative; 
    appearance: none; 
    -moz-appearance: none; 
    -webkit-appearance: none; 
} 

2）を設定なし]ドロップダウン

.myBox:after { 
     content: ""; 
     width: 25px; 
     height: 25px; 
     background:#fff; 
     display: block; 
     position: absolute; 
     text-align:center; 
     color:#999; 
     font-size:14px; 
     top: 0; 
     right: 0; 
     z-index: 1; 
    } 

https://jsfiddle.net/f9ju0gdk/