刪除選擇中的下拉箭頭

Question

嗨，我正在做我的導航菜單作為選擇下拉菜單。 這是我的CSS

#navigation {
    position: relative;
    margin-left:0;
    display: block;
    width:95%;
    height:30px;
    margin-top:10px;
    margin-bottom:15px;
    /*background:url(../Shared/arrow.jpg) no-repeat right #ececec;*/   
    background-color:#ececec;
    border-radius:3px;
}

nav select { 
    display: inline-block; 
    width:90%;
    margin-left:2%;
    border:0 !important;
    position:relative; 
    margin-top:6px; 
    background:url(../Shared/arrow.png) no-repeat right #ececec;
    -webkit-appearance: none;          
    -moz-appearance: none;
    /*background: transparent;*/
}

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

我的問題是我試圖顯示自己的箭頭按鈕，但它始終位於選擇框的原始箭頭按鈕下。 我該如何更改

當更改選擇的寬度為

  width:110%;

然后輸出將是

Answer 1

看一下這個 ：-

http://jsfiddle.net/Bpmhs/

<select id="style1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

    #style1 {
        width: 400px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 2px 30px 2px 2px;    
        background: transparent    url("http://media.miamiherald.com/static/images/redesign/dropdown-arrow-yellow.gif") no-repeat right center;
  }

Answer 2

這是一個codpen，演示是一個解決方案

您缺少的兩個關鍵要素是

#navigation{
   width: 100%;
     -webkit-appearance: none;

}

然后在您的案例導航中控制包裝器中下拉菜單的寬度