Question

这是下拉代码

<select id="dropdown">
                <option value="">Go to page...</option>
                <option value="http://stackoverflow.com">CSS-Tricks</option>
                <option value="http://superuser.com">Digging Into WordPress</option>
                <option value="http://metastackoverflow.com">Quotes on Design</option>
            </select>

我只想自定义箭头图像背景和边框？我知道很多jquery和moo工具插件，但我想要轻巧，简单和可定制的jquery方式？

alt text http://easycaptures.com/fs/uploaded/226/6042718975.png

Answer 1

不可能只是那种风格。我写了一段时间来回顾这些需求。请在下面查看。

http://jeremy.infinicastonline.com/2010/01/selectzor/

Answer 2

操作系统而不是浏览器会显示下拉菜单。除了滚动你自己之外，你无法控制它。

Answer 3

您也无法使用jQuery设置样式。 jQuery不是一个魔术棒，它可以让你做任何你能想象到网页的事情。

通常，样式表单控件的选项将非常有限，因为：

对于浏览器制造商来说，让表单控件变得风格化会很复杂;以及
表单控件总是看起来一样好。这意味着用户知道它们是什么，因此当他们点击它们时会发生什么。

Answer 4

这是我做的另一种选择。可能有帮助。

Codepen example

<div class="credit-mob-rate">
  <fieldset>
      <select id="timeframe-select" class="timeframe" tabindex="-1">
        <option value="1" selected="">1 an</option>
        <option value="2">2 ani</option>
        <option value="3">3 ani</option>
        <option value="4">4 ani</option>
        <option value="5">5 ani</option>
      </select>
      <span class="ion-arrow-down-b"></span>
   </fieldset>
</div>

和不同事件的js。你会在那里找到css。

$("#timeframe-select").blur(function() {
    console.log('blur');
    $('.credit-mob-rate').removeClass('highlight-mobile');
    $('.credit-mob-rate fieldset span').addClass("ion-arrow-down-b");
    $('.credit-mob-rate fieldset span').removeClass("ion-arrow-up-b");
});

$("#timeframe-select").change(function() {
    if ($('.credit-mob-rate fieldset span').hasClass('ion-arrow-up-b')) {
        this.selectChanged = true;
    }
    console.log('change');
    $('.credit-mob-rate fieldset span').addClass("ion-arrow-down-b");
    $('.credit-mob-rate fieldset span').removeClass("ion-arrow-up-b");
});

$("#timeframe-select").click(function() {
    console.log('click');
    if (this.selectChanged) {
        this.selectChanged = false;
        return;
    }

    if ($('.credit-mob-rate fieldset span').hasClass('ion-arrow-up-b')) {

        $('.credit-mob-rate fieldset span').addClass("ion-arrow-down-b");
        $('.credit-mob-rate fieldset span').removeClass("ion-arrow-up-b");
    } else {
        $('.credit-mob-rate fieldset span').addClass("ion-arrow-up-b");
        $('.credit-mob-rate fieldset span').removeClass("ion-arrow-down-b");
    }
    $('.credit-mob-rate').addClass('highlight-mobile');
});

$("#timeframe-select").on('keypress', function(e) {
    if (e.charCode != 13 && e.charCode != 10) {
        return;
    }
    console.log('keypress');
    if (this.selectChanged) {
        this.selectChanged = false;
        $('.credit-mob-rate').addClass('highlight-mobile');
        $('.credit-mob-rate fieldset span').addClass("ion-arrow-down-b");
        $('.credit-mob-rate fieldset span').removeClass("ion-arrow-up-b");

    } else {
        $('.credit-mob-rate').addClass('highlight-mobile');
        $('.credit-mob-rate fieldset span').addClass("ion-arrow-up-b");
        $('.credit-mob-rate fieldset span').removeClass("ion-arrow-down-b");
    }
});

如何仅自定义<select>下拉列表的箭头？</select>

4 个答案: