删除选择中的下拉箭头

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;

}

然后在您的案例导航中控制包装器中下拉菜单的宽度