tastySelect

И сразу же пример!

Помело Апельсин Яблоко Помидор Картошка Огурец Дай что-нибудь мне Хотя бы водички

На мобилках будет вызван нативный обработчик, а на компьютерах нормальный, красивый селект.
Запуск плагина в этом случае выглядит так:

tastySelect({ defaultText: "Можешь выбрать покушать! (Ctrl+Click)", });

Стилизовать можно вообще как угодно!

• Странности
• Больше странностей

Структура одна, я просто меняю класс! Прекрасно стилизуется :з
Вообще-то хотел сделать больше стилей, но стало лень.

Скачивай скорее прямо из печи! Достаточно всего лишь подключить скрипт на страницу и вызвать функцию! Где такое видано? (тссс.. Я знаю что везде)

Скачать :зОтправиться на GitHub!

Структура HTML

На самом деле не представляю как нормально объяснить структуру)
classes.whatever - Это класс, который мы передали в настройках. Например для classes.outer по умолчанию задано "style-select". Все классы указанные по умолчанию можно посмотреть здесь

<div class=classes.outer>
Оболочка для стилизации и селекта
	<div class=classes.title></div>
	Видимая часть (если выпадашка скрыта)
	<div class=classes.options>
	Общий блок для элементов
		<ul class=classes.list>
			Такой список используется для элементов без подгруппы
			<li class=classes.option attributes.value attributes.index></li>
			Сам элемент. attributes.index - позиция элемента в select, attributes.value - значение оригинального option
		</ul>
		<ul class=classes.optgroup>
		Такой список используется для элементов подгруппы
			<li class=classes.label></li>
			Заголовок для подгруппы. Значение берется из атрибута label тега optgroup
			<li class=classes.option attributes.value attributes.index></li>
			Сам элемент. attributes.index - позиция элемента в select, attributes.value - значение оригинального option
		</ul>
	</div>
	<select>...</select>
	Оригинальный select. Разумеется его стоит скрыть в css.
</div>

Мобильный фолбэк

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

(classes.outer).(classes.mobile) select{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	opacity: 0;
}

При тестах заметил интересное. Мобилка не дает выбрать первый option при множественном выборе. Написал решалку для этой штуки, по умолчанию она чинится. Что бы отключить нужно передать в настройках следующее:

tastySelect({ mobileFix: false, });

APIшечка

Вообще все настройки передаются при вызове в объекте.

Классы настраиваются именно так:

Атрибуты, вдруг пригодятся: