删除选择中的下拉箭头

时间：2013-12-18 05:40:16

标签： jquery html css

您好我正在使用导航菜单作为选择下拉菜单。这是我的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;
}

我的问题是我正在尝试显示自己的箭头按钮，但它总是放在选择框的原始箭头按钮下。我怎样才能改变这个

enter image description here

将选择的宽度更改为

  width:110%;

然后输出

enter image description here

2 个答案:

答案 0 :(得分：0)

检查出来： -

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

答案 1 :(得分：0)

这是一个演示版a solution

的编码

你缺少的两件关键事项是

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

}

然后在你的案例导航选择

中控制包装器中下拉的宽度
相关问题
最新问题