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

У меня есть окно выбора HTML, которое мне нужно стилизовать. Я предпочел бы использовать только CSS, но если потребуется, я воспользуюсь jQuery, чтобы заполнить пробелы.

Кто-нибудь может порекомендовать хороший учебник или плагин?

Я знаю, Google, но я искал последние два часа и не нашел ничего, что отвечало бы моим потребностям.

Это должно быть:

Compatible with jQuery 1.3.2 Accessible Unobtrusive Completely customizable in terms of styling every aspect of a select box

Кто-нибудь знает что-нибудь, что будет соответствовать моим потребностям?

 Manish21 дек. 2009 г., 15:18
+1 за приятное объяснение и форматирование!
 PointedEars12 нояб. 2012 г., 14:19
@Ayyash То, что вы говорите, верно для MSHTML (Internet Explorer и друзья) и WebCore (Safari) на некоторых системах (конечно, Mac OS). Это не относится к Gecko (Firefox и его друзьям). Так что настоящая проблема в том, что вы не можете стильselect элементы кросс-браузерные. Но если люди хотят жить с различиями, выcan стилизовать их & # x2013;including границы.
 Ayyash14 нояб. 2012 г., 06:18
@PointedEras да, в 2012 году они могут, но я предполагаю, что это было 3 года назад, когда я сказал то, что я сказал, я почти уверен, что сделал выстрел тогда, и это не сработало
 a paid nerd06 окт. 2011 г., 23:03
Chosen Стоит упомянуть, но не очень настраиваемый и имеет много открытых вопросов. Хотя приятно смотреть и использовать.
 Ayyash02 июл. 2009 г., 05:06
Вы имеете в виду, что вы хотите настраиваемый выпадающий список (встроенный в JQuery), верно? потому что блоки выбора даже не являются объектами браузера (они являются объектами платформы), очень просты, очень сыры, и вы не можете стилизовать большую часть из них (например, вы не можете стилизовать границы)

Ответы на вопрос(15)

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

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

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

это так, что вы все еще можете нажать на него

Затем сделайте 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;}. То, что браузеры должны делать в лучшем случае, это диктовать взаимодействие с элементами формы, но определенно не то, как они изначально отображаются на странице, поскольку это нарушает дизайн сайта.

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

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

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

Updated for 2014: You don't need jQuery for this, Вы можете полностью стилизовать поле выбора без 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') создаст стилизованное поле выбора следующим образом:

enter image description here

 20 июл. 2015 г., 20:59
Примечание, нет поддержки IE9 и ниже

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

http://www.selectboxit.com

Update: По состоянию на 2013 год, которые я видел, которые стоит проверить, это:

Chosen - loads of cool stuff, 7k+ watchers on github. (mentioned by 'a paid nerd' in the comments) Select2 - inspired by Chosen, part of Angular-UI with a couple useful tweaks on Chosen.

Да уж!

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

Adds images and text to select options Can use JSON to populate options Supports callback functions on selection

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

enter image description here

 25 окт. 2012 г., 09:14
это превосходно.

Если есть решение без 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>
 07 февр. 2014 г., 19:25
Пожалуйста, предоставьте пример, а не просто ссылку на него.
 03 мар. 2014 г., 22:38
Хорошо, понял ... :-) Я сделаю все возможное, чтобы сохранить ссылку ...
 17 февр. 2014 г., 20:22
Я изменил свой ответ, как вы просили.
 17 февр. 2014 г., 20:41
Выглядит намного лучше сейчас. Кстати, нет ничего плохого в том, чтобы ссылаться на рабочий пример или источник, показывающий пример (это может быть весьма полезно). Но неизбежно ссылки со временем становятся недействительными, поэтому желательно всегда предоставлять необходимую информацию в самом ответе (который вы предоставили), даже когда предоставляются полезные ссылки.

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

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

Решение Вопроса

Я видел несколько плагинов 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;
}
 19 апр. 2012 г., 22:26
Просто имейте в виду, что большинство плагинов меню недоступны для программ чтения с экрана. Еще не нашел тот, который работает.
 02 июл. 2009 г., 06:51
Я сам этим не пользовался. Демо (brainfault.com/demo/selectbox/0.5) это выглядит хорошо. Посмотрите вокруг для других реализаций. Я знаю, что видел несколько других плагинов, которые делают это.
 02 июл. 2009 г., 06:16
Первоначально я пробовал эту версию, но DIV не расположен относительно того, где находится поле выбора. Вместо этого он жестко расположен слева.
 22 нояб. 2010 г., 16:36
404 - есть идеи, где были зеркала?
 15 авг. 2010 г., 08:20
Я попробовал это, и это работало какое-то время, пока мне не пришлось разместить больше одного на странице. Теперь его сложно стилизовать, потому что по какой-то глупой причине автор решил, что можно использовать один и тот же идентификатор для всех элементов, а не уникальные идентификаторы или классы. Теперь я думаю написать свою собственную ...

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

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

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

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

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

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

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

go crazy customizing the closed state of a select element but at open state, you favor a better native experience to picking options (scroll wheel, arrow keys, tab focus, ajax modifications to options, proper zindex, etc) dislike the messy ul, li generated markups

затем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

 13 мар. 2012 г., 01:16
это здорово и работает на мобильных устройствах :)
 13 мар. 2012 г., 13:08
это был не вопрос, это была похвала. Этоdoes отлично работает на моем Android.
 13 мар. 2012 г., 08:22
работает на IOS. извините, у меня нет доступа к Android и т. д.?

это используетtwitter-bootstrap стили для поворотаselectвdropdown меню https://github.com/silviomoreto/bootstrap-select

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

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

http://github.com/Igor10k/ikSelect

Ваш ответ на вопрос