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

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

<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

источник

2010-01-26 Jitendra Vyas

Его не возможно просто стиль, который. Я написал selectzor некоторое время назад, чтобы удовлетворить эти потребности. Проверьте это ниже.

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

источник

2010-01-26 20:12:05

У меня только один выпадающий список на весь сайт. стоит ли использовать решение ur только для одного раскрывающегося списка. и ур решение, как вы упомянули, не совместимы с IE 6, которые мне также нужны. но мне понравилось решение ур. –

может сделать ur selectzor.js более крошечным только для одного раскрывающегося списка. Мне не нужна функциональность Sample 2, которая находится в файле примера –

с открытым исходным кодом, поэтому вы можете просто вырвать часть кода. –

раскрывающихся оказываются в операционной системе, а не в браузере. У вас нет контроля над этим, кроме того, что вы рулон.

источник

2010-01-26 20:22:53

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

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

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

источник

2010-01-26 20:22:54

1. Похоже, это не «сложно» для других элементов формы. Это просто никогда не было частью спецификации HTML. –

«Кажется, это не« сложно »для других элементов формы.« Ах, вы явно никогда не пытались создать HTML-код. http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ –

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

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

источник

2016-11-22 11:52:17 DragosB

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

ответ

Смежные вопросы