Question

要修复safari下拉样式问题，请添加-webkit-appearance：none。这是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/

-webkit-appearance：none下拉图标问题

1 个答案: