Чи можна стилізувати вибране поле? [зачинено]

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

Хтось може порекомендувати хороший підручник чи плагін?

Я знаю, Google, але я шукав останні дві години, і не знаходжу нічого, що відповідає моїм потребам.

Це повинно бути:

• Сумісний з jQuery 1.3.2
• Доступний
• Непомітний
• Повністю настроюється з точки зору стилізації кожного аспекту вибору

Хтось знає щось, що відповідає моїм потребам?

Я бачив кілька плагінів jQuery, які перетворюють <select>'s у <ol>' і <option>'s у <li>' s, так що ви можете стилізувати це за допомогою 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;
}

Оновлення: Станом на 2013 рік два, які я бачив, які варто перевірити:

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

Так!

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

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

Ось попередній перегляд різних режимів:

Що стосується CSS, то Mozilla здається найбільш привітним, особливо з FF 3.5+. Веб-браузери здебільшого просто роблять свою справу і ігнорують будь-який стиль. 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 з тими ж розмірами, що і поле вибору. Діл повинен лежати під полем вибору як фон. Використовуйте {позиція: абсолютний} та z-індекс для досягнення цього.

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

Оновіть внутрішнійHTML Div за допомогою javascript. Простота з jQuery:

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

Це воно! Просто стилізуйте свій div, а не виберіть поле. Я не перевіряв вищевказаний код, тому вам, мабуть, знадобиться його підправити. Але, сподіваємось, ви отримаєте суть.

Я думаю, що це рішення перемагає {-webkit-izgled: none;}. Що браузери повинні робити якнайбільше - це диктувати взаємодію з елементами форми, але точно не те, як їх спочатку відображається на сторінці, як це порушує дизайн сайту.

Ось невеликий штекер, якщо ви в основному хочете

• Шалет Призначена для користувача настройка закритого стану у вигляді selectелемента
• але у відкритому стані ви optionsвіддаєте перевагу кращому досвіду вибору варіантів (колесо прокрутки, клавіші зі стрілками, фокус вкладки, модифікація ajax , належний 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

Ви можете певною мірою стилізувати CSS

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

Але це повністю залежить від браузера. Деякі браузери вперті.

Однак, це отримає вас лише поки що, і це не завжди виглядає дуже добре. Для повного контролю вам потрібно буде замінити вибір через jQuery на власний віджет, який імітує функціональність вікна вибору. Переконайтесь, що коли JS відключений, нормальне поле вибору стоїть на своєму місці. Це дозволяє більшій кількості користувачів скористатися вашою формою, і це допоможе в доступності.

Більшість браузерів не підтримує налаштування виділеного тегу за допомогою css. Але я знаходжу цей JavaScript, який можна використовувати для вибору стилю тегу. Але як завжди немає підтримки для браузерів 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:

<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стилі , щоб включити selectв dropdownменю https://github.com/silviomoreto/bootstrap-select

Просте рішення - Warp, виберіть поле у ​​розділі та виберіть стиль, який відповідає вашому дизайну. Встановіть непрозорість: 0 для вибору вікна, це зробить поле вибору невидимим. Вставте тег span з jQuery та змініть його значення динамічно, якщо користувач змінить спадне значення. Загальна демонстрація показана в цьому підручнику з поясненням коду. Сподіваюся, це вирішить вашу проблему.

JQuery Code схожий на це.

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