jquery - 删除选择中的下拉箭头

嗨，我正在做我的导航菜单作为选择下拉菜单。这是我的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%;

然后输出将是

最佳答案

这是演示的a solution

您缺少的两个关键要素是

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

}

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