Нестандартний select, зміна їх зовнішнього вигляду та оформлення, shublog

Всі прекрасно знають, що змінити оформлення SELECT'ов в формі це суцільний геморой. Жоден раз стикався з тим, що у сайту з симпатичним дизайном встановлені потворні SELECT'и, повністю вибиваються з того самого дизайну. І це не кажучи про те, що в різних браузерах вони виглядають по-різному.

Стилі CSS досить бідно дозволяють налаштовувати зовнішній вигляд SELECT'ов: їм можна задати колір бекграунду, але при цьому не можна в якості бекграунду задати картинку. Про що думали, коли це робили?

Змінити оформлення злощасного викидного списку можна і допомагає в цьому нам jQuery і інші подібні бібліотеки. Модулі для цих бібліотек підміняють стандартний селект на викидний список, зроблений з класичних тегів

,

,

    і так далі, а з ними CSS нам дозволяє працювати на всі 100%.

    Проте не все так гладко, як хотілося б. Дуже багато нишпорячи в інтернеті в пошуках подібних скриптів, я натикався на різні варіації, що володіють різними вадами, через що проблему заміни SELECT'ов я вважаю досить актуальною. Я не буду приводити все, що я знайшов, зупинюся на декількох.

    Змінені SELECT'и без смуги прокрутки

    Нестандартний select, зміна їх зовнішнього вигляду та оформлення, shublog

    Це найбільш поширені СЕЛЕКТА, недолік яких вказано в назві. Найчастіше вони прекрасно працюють, нічого більше і не треба, однак якщо список перевищує 15-20 елементів, то сторінка розтягується дуже далеко, а у селекта немає ніяких смуг прокручування. Проблема? При великих списках не просто проблема, а катастрофа.

    SELECT'и, заточені під старовинні версії бібліотек

    Адекватні оформлення SELECT'ов

    Нестандартний select, зміна їх зовнішнього вигляду та оформлення, shublog

    Однак і тут також знайшлися АЛЕ. Найголовніша з них полягає в тому, що при наявності декількох СЕЛЕКТА на сторінці (а може навіть і одному, але великому, не перевіряв) оформлення сглюківает через повільне рендеринга сторінки. У мене часто пропадали смуги прокрутки в СЕЛЕКТА.

    Тим не менш, це один з кращих, знайдених мною, плагінів зі зміни оформлення SELECT'ов. І, що найприємніше, він постійно допрацьовується. До кінця цього місяця обіцяли випустити нову версію, в якій якраз таки повинна бути вирішена проблема рендеринга.

    Наостанок хочеться сказати, що не було знайдено жодного прикладу оформлених залежних СЕЛЕКТА - тих, в яких вибираєш в першому СЕЛЕКТА одне, в залежності від цього підставляються значення у другому СЕЛЕКТА і так далі. Хоча такий приклад можна буде зробити. Вважаю, якщо представлений трохи вище плагін буде оновлено і буде обезбаган, то взявши його за основу я, напевно, зроблю такі списки. Але це як-небудь потім.

    [UPD] Поки писав пост, плагін з сайту xiper.net взяли і оновили, буквально вчора, вже встигли виявити кілька недоліків. У нього тепер є своя назва - cuSel. Потестить плагін ще не встиг, але, думається, нововведення припадуть до смаку. Посилання на плагін я трохи вище змінив - під кнопкою "Приклад 1" приклад необновлённого плагіна, а під "Приклад 2" - приклад з оновленим плагіном.

    Схожі статті