-网络套件外观:无 下拉图标问题

Question

要修复 safari 下拉样式问题，添加了 -webkit-外观：无。这删除了 chrome 和其他浏览器中的下拉图标（小向下箭头）。

我们如何解决这个问题？

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/