Можно ли создать поле выбора?

Ответ 1

Я видел некоторые плагины jQuery, которые конвертируют <select> в <ol> и <option> в <li>, так что вы можете стилизовать его с помощью CSS. Не может быть слишком сложно катиться.

Здесь один: https://gist.github.com/1139558 (Используется для здесь, но похоже, что сайт не работает.)

Используйте его следующим образом:

$('#myselectbox').selectbox();

Стиль выглядит так:

div.selectbox-wrapper ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.selectbox-wrapper ul li.selected { 
  background-color: #EAF2FB;
}
div.selectbox-wrapper ul li.current { 
  background-color: #CDD8E4;
}
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}

Ответ 2

Обновление:. К 2013 году два, которые я видел, заслуживают проверки:

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

Да!

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

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

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

Ответ 3

Что касается 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 делает свое дело.

Ответ 4

Мы нашли простой и достойный способ сделать это. Это кросс-браузер, разлагаемый и не разбивает сообщение формы. Сначала установите прозрачность окна выбора равным 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>

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

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

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

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

Ответ 5

Вот небольшой плагин, если вы в основном хотите

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

Тогда jquery.yaselect.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

Ответ 6

Вы можете в какой-то степени стилизовать CSS с помощью

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

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

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

Если есть решение без 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:

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

Ответ 10

Обновлено для 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') создаст окно выбора стилей следующим образом:

Ответ 11

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

http://www.selectboxit.com

Ответ 12

Вам следует попробовать использовать какой-либо плагин jQuery, например ikSelect.

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

http://github.com/Igor10k/ikSelect

Ответ 13

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

Ответ 14

this использует стили twitter-bootstrap, чтобы включить select в меню dropdown https://github.com/silviomoreto/bootstrap-select

Ответ 15

Простым решением является Warp ваш поле выбора внутри 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>