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

142

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

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

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

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

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

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

@Ayyash То, что вы говорите, верно для MSHTML (Internet Explorer и друзья) и WebCore (Safari) на некоторых системах (конечно, Mac OS). Это не относится к Gecko (Firefox и его друзьям). Так что настоящая проблема в том, что вы не можете стильselect элементы кросс-браузерные. Но если люди хотят жить с различиями, выcan стилизовать их & # x2013;including границы. PointedEars
@PointedEras да, в 2012 году они могут, но я предполагаю, что это было 3 года назад, когда я сказал то, что я сказал, я почти уверен, что сделал выстрел тогда, и это не сработало Ayyash
+1 за приятное объяснение и форматирование! Manish
Chosen Стоит упомянуть, но не очень настраиваемый и имеет много открытых вопросов. Хотя приятно смотреть и использовать. a paid nerd
Вы имеете в виду, что вы хотите настраиваемый выпадающий список (встроенный в JQuery), верно? потому что блоки выбора даже не являются объектами браузера (они являются объектами платформы), очень просты, очень сыры, и вы не можете стилизовать большую часть из них (например, вы не можете стилизовать границы) Ayyash

Ваш Ответ

15   ответов
4

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

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

1

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

2

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

Примечание, нет поддержки IE9 и ниже
1

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

http://www.selectboxit.com

17

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

это превосходно.
2

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

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

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

45

Я видел несколько плагинов 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;
}
Я сам этим не пользовался. Демо (brainfault.com/demo/selectbox/0.5) это выглядит хорошо. Посмотрите вокруг для других реализаций. Я знаю, что видел несколько других плагинов, которые делают это.
Первоначально я пробовал эту версию, но DIV не расположен относительно того, где находится поле выбора. Вместо этого он жестко расположен слева.
404 - есть идеи, где были зеркала?
Просто имейте в виду, что большинство плагинов меню недоступны для программ чтения с экрана. Еще не нашел тот, который работает.
Я попробовал это, и это работало какое-то время, пока мне не пришлось разместить больше одного на странице. Теперь его сложно стилизовать, потому что по какой-то глупой причине автор решил, что можно использовать один и тот же идентификатор для всех элементов, а не уникальные идентификаторы или классы. Теперь я думаю написать свою собственную ...
5

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

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

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

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

11

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

14

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

-1

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

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

  • 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

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

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

1

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

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

http://github.com/Igor10k/ikSelect

Похожие вопросы