Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Стилизация select

Часто так бывает что мы хотим что-то уникальное, и не похоже на то что есть у других. Это касается и стандартных селектов. Но как мы знаем сделать это не так просто как кажется. По этому я решил написать о том, как все таки можно стилизировать select. ( Данный способ работает начиная с 8-й версии IE.)

Для начала подключаем библиотеку jquery, без которой не будет работать ни один скрипт. Лучше всего подключать прямо с google. (Посмотрите, может у вас уже подключена библиотека). Сделать это просто, просто подключаем между тегами <HEAD></HEAD> следующее:

<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js»></script>

Теперь переходим непосредственно к основным шагам. 1. Подключаем сам скрипт для стилизации select:

<script type=»text/javascript» src=»js/jquery.selectBox.js»></script>

ПРИМЕТКА:

js/ — это путь к папке, где расположен сам скрипт

2. Вставляем код для работы скрипта:

<script type=»text/javascript»> $(document).ready(function() { $(«select»).selectBox(); }); </script>

3. Копируем стили для наших селектов в файл стилей:

.select {
margin-top: 8px;
float: left;}
.selectBox {
border: 1px solid #c4c0bf;
display: inline-block;
position: relative;
width: 225px;
height: 20px;
line-height: 20px;
font-size: 16px;
color: #000;
text-decoration: none;
}
.selectBox:hover {
color: #000;
text-decoration: none;
}
.selectBox-label {
padding: 0 0px 0 5px;
font-size: 12px;
}
.selectBox-arrow {
position: absolute;
left: auto;
right: 2px;
top: 1px;
width: 18px;
height: 18px;
overflow: hidden;
cursor: pointer;
background: url(../images/strelka.png) 0 0 no-repeat;
}
.selectBox-dropdown-menu {
position: absolute;
list-style: none;
font-size: 16px;
line-height: 20px;
background: #fff;
margin: 0;
padding: 0;
border: 1px solid #999;
}
.selectBox-dropdown-menu li {
display: block;
}
.selectBox-dropdown-menu li a {
display: block;
padding: 0 2px;
color: #000;
text-decoration: none;
cursor: pointer;
}
.selectBox-dropdown-menu li a:hover {
color: #fff;
text-decoration: none;
background: #333;
}

3. Теперь в нужном месте вставляем HTML код.

<div class=»select»>
<select>
<option>Все направления</option>
<option>Очень красиво </option>
<option>Легок и воздушно</option>
<option>Красота:)</option>
</select>
</div>

Если хотите посмотреть работу списка select смотрите Пример

Исходники можете скачать по этой ссылке

Если у вас есть вопросы, то задавайте их в комментариях.