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

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;
}

我的问题是我试图显示我自己的箭头按钮，但它始终位于选择框的原始箭头按钮下方。我怎样才能改变这个

当改变select as的宽度时

  width:110%;

然后输出将是

Answer 1

这里是演示的代码 a solution

你缺少的两个关键是

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

}

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