Можно ли стилизовать поле выбора? [закрытый]

обновление: по состоянию на 2013 два я видел, что стоит проверить являются:

• выбрал - множество интересных вещей, 7K + наблюдатели на github. (упоминается "платный ботаник" в комментариях)
• Select2 - вдохновленный выбранным, частью углового интерфейса с парой полезных настроек на выбранном.

да!

---

по состоянию на 2012 год одним из самых легких и гибких решений, которые я нашел, является ddSlick. Актуальная (отредактированная) информация с сайта:

• добавляет изображения и текст в select options
• можно использовать JSON для заполнения параметров
• поддерживает функции обратного вызова на выбор

и вот предварительный просмотр различных режимах:

Что касается CSS, Mozilla кажется наиболее дружественным, особенно от FF 3.5+. Браузеры Webkit в основном просто делают свое дело и игнорируют любой стиль. IE очень ограничен, хотя IE8 позволяет вам по крайней мере стилизовать цвет/ширину границы.

следующее На самом деле выглядит довольно красиво в FF 3.5+ (выбирая ваши предпочтения цвета, конечно):

select {
    -moz-border-radius: 4px;
    -moz-box-shadow: 1px 1px 5px #cfcfcf inset;
    border: 1px solid #cfcfcf;
    vertical-align: middle;
    background-color: transparent;
}
option {
    background-color: #fef5e6;
    border-bottom: 1px solid #ebdac0;
    border-right: 1px solid #d6bb86;
    border-left: 1px solid #d6bb86;
}
option:hover {
    cursor: pointer;
}

но когда дело доходит до IE, вы должны отключить цвет фона на опции, если вы не хотите, чтобы он отображался, когда меню опций не опускается. И, как я уже сказал, webkit делает свое дело.

мы нашли простой и достойный способ сделать это. Это кросс-браузер, деградируемый и не нарушает сообщение формы. Сначала установите непрозрачность поля выбора в 0.

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

это значит, вы все еще можете нажать на это

затем сделайте div с теми же размерами, что и поле выбора. Div должен лежать под полем выбора в качестве фона. Для этого используйте { position: absolute } и z-index.

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

обновите innerHTML div с помощью javascript. Easypeasy с помощью jQuery:

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

вот именно! Просто создайте свой div вместо поля выбора. Я не тестировал приведенный выше код, так что вам, вероятно, потребуется настроить его. Но, надеюсь, вы поняли суть.

Я думаю, что это решение бьет {- webkit-appearance: none;}. То, что браузеры должны делать в самом лучшем случае, диктует взаимодействие с элементами формы, но определенно не так, как их первоначально отображалось на странице, поскольку это нарушает дизайн сайта.

вот небольшая вилка, если вы в основном хотите

• сходят с ума настройки закрытом состоянии на select элемент
• а в открытом состоянии, вы предпочитаете лучший родной опыт для выбора опций (колесо прокрутки, клавиши со стрелками, вкладка фокус, ajax модификации options, правильный zindex и т. д.)
• не нравится грязный ul,li создается накруток

затем jquery.яселект.js может быть лучше подходят. Просто:

$('select').yaselect();

и окончательная разметка:

<div class="yaselect-wrap">
  <div class="yaselect-current"><!-- current selection --></div>
</div>
<select class="yaselect-select" size="5">
  <!-- your option tags -->
</select>

проверьте это на github.com

вы можете стиль в некоторой степени с CSS сам по себе

select {
    background: red;
    border: 2px solid pink;
}

но это полностью зависит от браузера. Некоторые браузеры упрямы.

однако, это только поможет вам до сих пор, и это не всегда выглядит очень хорошо. Для полного контроля вам нужно будет заменить select via jQuery собственным виджетом, который эмулирует функциональность окна выбора. Убедитесь, что когда JS отключен, обычное поле выбора находится на своем месте. Это позволяет большему количеству пользователей использовать вашу форму, и это помогает с доступностью.

большинство браузеров не поддерживает настройку select tag с помощью css. Но я нахожу этот javascript, который можно использовать для стиля select tag. Но, как обычно, нет поддержки браузеров IE.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Я заметил ошибку на этом, что onChange атрибут не работает

Я только что нашел это, что кажется очень хорошим.

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

Если есть решение без jQuery. Ссылка, где вы можете увидеть рабочий пример:http://www.letmaier.com/_selectbox/select_general_code.html (в стиле с большим количеством css)

стиль-раздел моего решения:

<style>
#container { margin: 10px; padding: 5px; background: #E7E7E7; width: 300px; background: #ededed); }
#ul1 { display: none; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; }
#container a {  color: #333333; text-decoration: none; }
#container ul li {  padding: 3px;   padding-left: 0px;  border-bottom: 1px solid #aaa;  font-size: 0.8em; cursor: pointer; }
#container ul li:hover { background: #f5f4f4; }
</style>

теперь HTML-код внутри body-tag:

<form>
<div id="container" onMouseOver="document.getElementById('ul1').style.display = 'block';" onMouseOut="document.getElementById('ul1').style.display = 'none';">
Select one entry: <input name="entrytext" type="text" disabled readonly>
<ul id="ul1">
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 1'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 1</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 2'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 2</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 3'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 3</a></li>
</ul>
</div>
</form>

Обновлено в 2014 году: вам не нужен jQuery для этого. Вы можете полностью стилизовать поле выбора без jQuery с помощью StyleSelect. Например, учитывая следующее поле выбора:

<select class="demo">
  <option value="value1">Label 1</option>
  <option value="value2" selected>Label 2</option>
  <option value="value3">Label 3</option>
</select>

под управлением styleSelect('select.demo') создаст стилизованное поле выбора следующим образом:

Я создал плагин jQuery,SelectBoxIt пару дней назад. Он пытается имитировать поведение обычного окна выбора HTML, но также позволяет стилизовать и анимировать поле выбора с помощью jQueryUI. Взгляните и дайте мне знать, что вы думаете.

http://www.selectboxit.com

вы должны попробовать использовать некоторые jQuery плагин типа ikSelect.

Я попытался сделать его очень настраиваемым, но простым в использовании.

http://github.com/Igor10k/ikSelect

Это кажется старым, но здесь очень интересный плагин -http://uniformjs.com

это использует twitter-bootstrap стили в свою очередь selectin https://github.com/silviomoreto/bootstrap-select

простое решение-это деформация вашего окна выбора внутри div и стиль div, соответствующий вашему дизайну. Установите непрозрачность: 0 для выбора поля, это сделает поле выбора невидимым. Вставьте тег span с помощью jQuery и измените его значение динамически, если пользователь изменит раскрывающееся значение. Общая демонстрация показана в этом уроке с объяснением кода. Надеюсь, что это решит вашу проблему.

код JQuery выглядит примерно так.

 <script>
   $(document).ready(function(){
     $('.dropdown_menu').each(function(){
       var baseData = $(this).find("select option:selected").html();
       $(this).prepend("<span>" + baseData + "</span>");
     });

     $(".dropdown_menu select").change(function(e){
       var nodeOne = $(this).val();
       var currentNode = $(this).find("option[value='"+ nodeOne +"']").text();
       $(this).parents(".dropdown_menu").find("span").text(currentNode);
     });
   });
</script>