1

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

<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。但这已经完成了箭头的造型。有人可以告诉我如何修复额外宽度，以便我的自定义箭头应该在选择选项中的默认箭头到位，并且选项的额外宽度也将被隐藏。小提琴的链接在这里

任何帮助和建议都将是非常可观的。谢谢

4

3 回答 3

0

样式化选择很麻烦。您可能会遇到浏览器问题。但是您可以使用高级插件来设置选择框的样式，例如http://ivaynberg.github.io/select2/。这也提供了许多其他功能。

于 2013-08-13T06:33:09.927 回答
0

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

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;
}
于 2013-08-13T06:07:55.867 回答
-5 
 .styleselect select {    
   width=auto;
  }
于 2013-08-13T05:57:02.127 回答