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

うまくいきました。しかし、オプションをクリックすると、オプションが実際の幅から余分な幅を持ち、実際には奇妙に見えるという1つの問題が発生しました。余分な幅は.styleselect select、私が入れた幅から来ていることを知っていextra widthます。しかし、それは矢印のスタイリングのために行われました。カスタム矢印が選択オプションのデフォルトの矢印に配置され、オプションの余分な幅も非表示になるように、余分な幅を修正する方法を教えてください。フィドルのリンクはこちら

どんな助けや提案も本当に価値があります。ありがとう

4

3 に答える 3

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 に答える
0

select のスタイリングは面倒です。ブラウザの問題が発生する場合があります。ただし、 http://ivaynberg.github.io/select2/のような選択ボックスをスタイリングするための高度なプラグインを使用できます。これにより、他の多くの機能も提供されます。

于 2013-08-13T06:33:09.927 に答える