html 从选项中删除带有额外空间的默认选择选项箭头

Question

我有一个这样的选择选项标记

<div class="styleselect">
  <select onchange="setLocation(this.value)" class="selections">
    <option selected="selected" value="position">Position</option>
    <option value="name">Name</option>
    <option value="price">Price</option>
  </select>
</div>

这里我想为选择选项的默认箭头设置样式，我这样更改了我的 css

.styleselect {
    background-color: #DFD3C3;
    background-image: url("http://s21.postimg.org/nx05vn15f/dropdown_style.png");
    background-position: 117px center;
    background-repeat: no-repeat;
    border: 1px solid #C5AF8A;
    overflow: hidden;
    vertical-align: middle;
    width: 140px;
    padding: 0;
    margin: 0;
    display: inline-block;
}
.styleselect select {
    background-color: transparent;
    margin: 0 0 1px;
    padding: 4px;
    vertical-align: middle;
    width: 190px;
}

它运行良好。但是我又遇到了一个问题，当我点击选项时，选项带有比实际宽度多的宽度，看起来很奇怪。我知道额外的宽度来自宽度 .styleselect select 我放置 extra width 的地方。但这已经完成了箭头的样式。有人可以告诉我如何修复额外宽度，以便我的自定义箭头应该在选择选项中用于默认箭头，并且选项的额外宽度也将被隐藏。 fiddle 的链接是 here

任何帮助和建议都将非常感激。谢谢

Answer 1

给你...我为选项添加了相同的颜色，也只是为了让控件具有统一的外观。希望对您有所帮助。

CSS 代码:

select{
   appearance:none; -moz-appearance:none; -webkit-appearance: none; 
    }
.styleselect {
    background-color: #DFD3C3;
    background-image: url("http://s21.postimg.org/nx05vn15f/dropdown_style.png");
    background-position: 117px center;
    background-repeat: no-repeat;
    border: 1px solid #C5AF8A;
    overflow: hidden;
    vertical-align: middle;
    width: 140px;
    padding: 0;
    margin: 0;
    display: inline-block;
}
.styleselect select {
    background-color: transparent;
    margin: 0 0 1px;
    padding: 4px;
    vertical-align: middle;
    width: 140px;
}
.styleselect select option{
 background-color: #DFD3C3;            
    overflow: hidden;
    vertical-align: middle;
    width: 140px;
    padding: 0;
    margin: 0;
    display: inline-block;
}