Как настроить только стрелку раскрывающегося списка <select>?

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 tools, но я хочу легкий и простой и настраиваемый способ jquery?

альтернативный текст http://easycaptures.com/fs/uploaded/226/6042718975.png

Answer 1

Невозможно просто стилизовать это. Я написал SELECTOR некоторое время назад, чтобы удовлетворить эти потребности, хотя. Проверьте это ниже.

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

Answer 2

Вот альтернатива, сделанная мной. Могу помочь.

Пример кодекса

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

Answer 3

Вы также не можете стилизовать его с помощью jQuery. JQuery не волшебная палочка, которая позволяет вам делать все, что вы можете себе представить, на веб-странице.

Как правило, ваши параметры стиля элементов управления формой будут весьма ограничены, потому что:

1. Создателям браузеров было бы сложно создать стили для элементов управления; и

2. На самом деле хорошо, что элементы управления формой всегда выглядят одинаково. Это означает, что пользователи знают, кто они, и, следовательно, что произойдет, когда они нажмут на них.

Answer 4

Раскрывающиеся элементы отображаются операционной системой, а не браузером. Вы не можете это контролировать, кроме как самим кататься.