Стилизация select на JavaScript
Кто серьёзно занимается вёрсткой страниц, знает, что возможности стилизации select в CSS крайне сильно ограничены. Но очень часто в дизайн стандартный select не вписывается вообще никак, поэтому приходится делать стилизацию select через JavaScript. Фактически, в этой статье мы с Вами создадим свой собственный select с помощью JavaScript.
Есть масса готовых плагинов, в том числе и на jQuery, которые позволяют всё это сделать. Но если Вам не нужно что-то сверхсложное, то проще сделать всё самому с нуля на чистом JavaScript.
Первым делом, давайте создадим HTML-структуру нашего будущего select:
<form name="form" action="#" method="post">
<noscript>
<select name="my_select">
<option value="1">Элемент 1</option>
<option value="2">Элемент 2</option>
<option value="3">Элемент 3</option>
</select>
</noscript>
<div class="select">
<p data-value="1" onclick="select(this)" class="active">Элемент 1</p>
<p data-value="2" onclick="select(this)">Элемент 2</p>
<p data-value="3" onclick="select(this)">Элемент 3</p>
<input type="hidden" name="my_select" id="my_select" value="" />
</div>
</form>
Как видите, тега 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.
-
Создано 20.09.2013 12:28:29
-
Михаил Русаков
Комментарии (6):
Когда Вы дизайн сайта поменяете? Говорили, что летом, но уже сентябрь и всё как было, так и есть. А то старый приелся уже, неудобен, да и вёрстка чего-то ломается в некоторых местах.
Ответить
Было много другой работы. Сам хочу давно сменить, но пока всё некогда.
Ответить
Михаил, а что такое data-value? data-description, data-title и прочее? Где можно почитать, или Вы сами объясните?
Ответить
Это data-* аттрибуты html5. Они тут исключительно для удобства и упрощения использования js.
Ответить
Спасибо за помощь! Отличная статья!
Ответить
Здравствуйте, подскажите, данный способ уже не актуален? у меня сворачивание-разворачивание не работает(
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.