Вордпрес плагін для стилізації select. JQuery-плагін для стилізації селектів. CSS-класи, які використовуються для оформлення селекту

Структура буде стандартною

Щоб у select відображається рядок один використовуємо атрибут size зі значенням 1.

Стилізація для нашого селекту

Отримуємо

Слон Бегемот Жираф

У прикладі вище ми прописали чотири рядки ccs властивості appearance з вендорними префіксами, щоб властивість працювала однаково у всіх браузерах. Що за властивість читайте нижче.

Вся складність полягала лише у заміні стандартної стрілки прямокутнику, замість якої ми реалізували background. Таким чином можна вставити будь-яку картинку. Необхідно лише підігнати розмір за допомогою якості background-size

Реалізувати наше завдання допомогло css3 властивість appearance

Дана властивість дозволяє змінити вигляд елемента на: button, checkbox, radio, field, icon та багато іншого. У нашому випадку ми взагалі приховали елемент, використовуючи none та додали картинку за допомогою background

Для того, щоб стилізувати select option потрібно JavaScript

Перед JavaScript-кодом має бути підключений jQuery

Останнім часом дизайнери стали все частіше малювати HTML форми у стилістиці HTML 2.0, ця тенденція триває вже кілька років і чим далі тим звичнішим стають красиві поля введення даних та select'и із закругленими краями та тінями. Можна тільки порадіти, адже все чудово і CSS3 вже використовується де тільки можна, дозволяючи надавати гарний вигляд формам, полям та селектам. На жаль, не завжди все так райдужно.

Незважаючи на те, що всі сучасні браузери підтримують HTML5 і CSS3, ними користуються далеко не всі, і як свідчить статистика половина користувачів всього інтернету, як і раніше, працюють у браузерах старих версій, багато з яких не підтримують повною мірою або взагалі CSS3. Тому стилізувати список (Select), що випадає, часто доводиться старими добрими засобами, а саме jQuery (js) і картинками PNG або GIF. Про один із таких способів я хочу розповісти.


Наведений нижче скрипт був випадково знайдений мною на сторінках рунету, на жаль, адреси я не запам'ятав і імені його автора. Тому просто передаю йому великий респект.

Перегляд коду JS

Виклик скрипту для стилізації "селексту".

Перегляд коду JS

HTML код «селекту», який буде стилізований

Перегляд коду HTML

Стиль який буде застосовано до селекту

Перегляд коду CSS

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

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

Доброго дня, хабраюзери і просто читають. Порівняно недавно запитав, як застосувати стилі до тега select. Усім хочеться, щоб стилізація форми відповідала дизайну сайту, а поки що не все можна описати чистим CSS. У цій статті ми розглянемо простий приклад написання свого select-списку, використовуючи CSS та бібліотеку мови JavaScript – jQuery. Думаю, особливо новачкам буде цікавий цей матеріал. Звичайно, краще було б краще написати на нативному JS, але всім відомо, що рядків коду було б більше, і навряд чи він був би зрозумілішим.

Чесно кажучи, перш ніж взятися за створення чергового велосипеда, я пробував знайти подібне рішення, але крім ефектних div-оберток для тега select нічого не знайшов. І я подумав, що буде непогано написати щось просте і потрібне. Ну що ж, почнемо!

У нашому гуртку ліплення з пластиліну беруть участь три файли:

• selectbox.html
• selectbox.css
• selectbox.js

selectbox.html

Місяць

• Січень
• Лютий
• Березень
• Квітень
• Травень
• Червень
• Липень
• Серпень
• Вересень
• Жовтень
• Листопад
• грудень

selectbox.css

div#selectBox ( width: 250px; position: relative; height: 50px; border-radius: 3px; border: solid 1px lightgrey; background-color: #fff; color: #333; cursor: pointer; overflow: hidden; transition: .3s; ) div#selectBox p.valueTag ( padding: 15px; cursor: pointer; transition: .2s; height: 40px; ) div#selectBox > img.arrow ( position: absolute; right: 0; width: 50px; padding : 15px; ) /* для користувачів Safari, Chrome та Opera приємний бонус - стилізований скролл-бар. */ ::-webkit-scrollbar ( background: transparent; width: 0.5em; position: absolute; ) ::-webkit-scrollbar-track ( background: transparent; position: absolute; z-index: -2; ) :: -webkit-scrollbar-thumb ( border-radius: 100px; background: #888; ) ul#selectMenuBox ( background: #fff; transition: .3s; width: 100%; height: 200px; overflow-y: auto; overflow- x: hidden !important; position: absolute; margin-top: 00px; display: block; ) ul#selectMenuBox > li ( display: block; li.option ( color: gray; padding: 10px; ) ul#selectMenuBox > li.option:hover ( color: #333; background: #e1e1e1; transition: .2s; )

А тепер до смакота! Розглянемо вихідний код плагіна selectbox()для jQuery, файл selectbox.js :

selectbox.js

(function($) ( $.fn.selectbox = function() ( // початкові параметри // задаємо стандартну висоту div"a. var selectDefaultHeight = $("#selectBox").height(); // кут повороту зображення в div"e var rotateDefault = "rotate(0deg)"; // після натискання кнопки спрацьовує функція, в якій // обчислюється вихідна висота нашого div"a. // дуже зручно для порівняння з вхідними параметрами (те, що задається на початку скрипту ) $("#selectBox > p.valueTag").click(function() ( // обчислення висоти об'єкта методом height() var currentHeight = $("#selectBox").height(); // перевірка умови на збіг/ не збіг із заданою висотою спочатку, // щоб зрозуміти, що робити далі if (currentHeight< 100 || currentHeight == selectDefaultHeight) { // если высота блока не менялась и равна высоте, заданной по умолчанию, // тогда мы открываем список и выбираем нужный элемент. $("#selectBox").height("250px"); // «точка остановки анимации» // здесь стилизуем нашу стрелку и делаем анимацию средствами CSS3 $("img.arrow").css({borderRadius: "1000px", transition: ".2s", transform: "rotate(180deg)"}); } // иначе если список развернут (высота больше или равна 250 пикселям), // то при нажатии на абзац с классом valueTag, сворачиваем наш список и // и присваиваем блоку первоначальную высоту + поворот стрелки в начальное положение if (currentHeight >= 250) ( $("#selectBox").height(selectDefaultHeight); $("img.arrow").css((transform: rotateDefault)); ) )); // так само згортаємо список при виборі потрібного елемента // і змінюємо текст абзацу на текст елемента у списку $("li.option").click(function() ( $("#selectBox").height(selectDefaultHeight); $ ("img.arrow").css((transform: rotateDefault)); $("p.valueTag").text($(this).text()); )); ); )) (jQuery);

$("selector").selectbox();
Попередньо, включивши дзвінок у метод ready() об'єкта document, щоб плагін завантажувався після повноцінного завантаження документа. Докладніше, що таке плагін на jQuery, можна ознайомитись

Хто серйозно займається версткою сторінок, знає, що можливості стилізації select в CSS дуже обмежені. Але дуже часто в дизайн стандартний select не вписується взагалі ніяк, тому доводиться робити стилізацію select через JavaScript. Фактично, у цій статті ми з Вами створимо свій власний select за допомогою JavaScript.

Є багато готових плагінів, у тому числі і на jQuery, які дозволяють все це зробити. Але якщо Вам не потрібно щось надскладне, то простіше зробити все з нуля на чистому JavaScript.

Насамперед, давайте створимо HTML-структуру нашого майбутнього select :

Елемент 1
Елемент 2
Елемент 3

Елемент 1

Елемент 2

Елемент 3

Як бачите, тега select тут і близько немає. Тепер ми можемо як завгодно стилізувати наш власний select за допомогою CSS:

Select (
background-color: #0ee;
border-radius: 10px;
padding: 10px 0;
width: 200px;
}
.select p (
cursor: pointer;
margin: 0;
padding: 5px 20px;
}
.select p.active (
background-color: #ee0;
}

Безумовно, Ви можете зробити все, що забажаєте. І, нарешті, треба перетворити зовнішній вигляд на функціональність select , тобто вибір і підсвічування лише одного елемента з декількох, а також подальше відправлення разом з формою. Для цього ми скористаємося JavaScript :

Function select(element) (
var value = element.getAttribute("data-value"); // Зчитуємо значення обраного елемента
var nodes = element.parentNode.childNodes; // Отримуємо всі інші елементи
for (var i = 0; i< nodes.length; i++) {
/* Відфільтровуємо сторонні елементи text та input */
if (nodes[i] instanceof HTMLParagraphElement) (
/* Додаємо active у вибраного елемента, стираючи даний клас у всіх інших */
if (value == nodes[i].getAttribute("data-value")) nodes[i].className = "active";
else nodes[i].className = "";
}
}
document.getElementById("my_select").value = value; // Встановлюємо у hidden-полі обране значення
}

Ключовим моментом реалізації функціональності select є hidden-поле , яке записується значення з нашого select . І саме це значення буде надіслано під час відправлення форми.

Ось таким нехитрим чином робиться абсолютно будь-яка стилізація select JavaScript. Якщо використовувати jQuery, код буде ще простіше.

Безумовно, стандартний select має більшу функціональність. Наприклад, він реагує на tab, також можна в ньому перебирати елементи стрілками на клавіатурі. Але все це Ви також можете реалізувати при необхідності на JavaScript.

І остання рекомендація. У коді був використаний тег noscript, і це було невипадково. Оскільки не у всіх JavaScript включено, і щоб форма була взагалі робочою для таких користувачів, потрібно вивести хоча б стандартний select. А всі, у кого JavaScript включений, побачать наш гарний select.

Увага! Подальший розвиток та підтримка плагіна зупинені у зв'язку з тим, що тепер він є частиною .

Одна з найнеприємніших (і я навіть сказав жахливих) речей у веб-розробці — це верстка html-форм. На жаль, немає єдиного стандарту відображення елементів форм, незалежно від браузера та операційної системи, так само, як і немає можливості довільно оформити деякі з цих елементів, використовуючи каскадні таблиці стилів.

Не піддаються повній стилізації такі елементи html-форм:

• список, що розкривається;
• прапорець;
• перемикач.
• поле для надсилання файлу.

Як уже зрозуміло із заголовка посту, тут йтиметься лише про селективи.

Існує чимало готових рішень у вигляді jQuery-плагінів для стилізації списків, що розкриваються. Але я (через те, що жоден із плагінів мене не влаштував з тих чи інших причин) вирішив піти шляхом винаходу свого колеса і написав власний плагін, яким і поділяюся в цій статті.

Відразу хочу зауважити, що цей плагін не підходить для всіх можливих випадків застосування селектів (читайте недоліки).

Ви можете подивитися приклад стилізації селектів за допомогою мого плагіна. Їхнє оформлення я зробив без використання зображень.

• При вимкненому JavaScript з'являються стандартні селективи.
• Невеликий розмір скрипту, приблизно 4 кілобайти.
• Працює в IE6+ та всіх сучасних десктопних браузерах.
• Виводиться внутрішньорядково.
• Легко піддається оформленню через CSS.
• Дозволяє задати максимальну висоту для списку (CSS-властивістю max-height).
• Автоматично налаштовує ширину, якщо вона не вказана.
• Підтримує прокручування колесом миші.
• Має «розумне позиціонування», тобто. при відкритті списку не йде за видиму частину сторінки.
• Вміє "ловити" натискання клавіші Tab і перемикатися стрілками на клавіатурі.
• Підтримує атрибут "disabled".
• Працює і з селектами, що динамічно додаються/змінюються.

• Чи не підтримує атрибут multiple , тобто. не дозволяє вибирати кілька пунктів (мультиселект).
• Не підтримує угрупування елементів списку (тег).
• Не підтримує перемикання стрілками на клавіатурі, коли список розкритий клацанням миші.

Плагін недоступний, т.к. він не актуальний.

Версія: 1.0.1 | Завантажень: 11103 | Розмір: 7 Кб | Останнє оновлення: 07.10.2012

Якщо на сайті ще не підключено jQuery, додайте наступний рядок перед тегом :

Відразу після jQuery підключіть файл зі скриптом:

(function($) ( $(function() ( $("select").selectbox(); )) ))(jQuery)

Цей код розмістіть перед тегом після вказаних вище файлів.

При динамічній зміні селектів необхідно запустити тригер refresh, наприклад:

(function($) ( $(function() ( $("button").click(function() ( $("select").find("option:nth-child(5))).attr("selected ", true); $("select").trigger("refresh"); )) )) ))(jQuery)

Його структура виглядає так:

-- Виберіть --

• -- Виберіть --
• Пункт 1
• Пункт 2
• Пункт 3

Щоб оформити селективи за допомогою CSS, використовуйте такі класи:

Створення подібного скрипта — досить копітке заняття, оскільки доводиться враховувати багато різних моментів. Дуже сподіваюся, що жодних серйозних багів не вилізе. Але, якщо що, повідомляйте у коментарях.