Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить 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 смотрите Пример

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

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

6 thoughts on “Стилизация select”

  1. Тарчу:

    — Легкие и красивые селекты,
    — Просты в установке,
    — и коректно отображаеться во всех браузерах
    Одни плюсы) спасибо!

  2. Sergey:

    Не пашет ни в одном браузере кроме Хрома(

  3. admin:

    Смотрите ДЕМО работает везде, наверное вы неправильно что-то установили.

  4. Антон:

    Собственно нахрена скриптом из select делать список? почему сразу нельзя все списком сверстать? и пусть скрипт уже обрабатывает ul li! это первое, второе: с фразой: » библиотеку jquery, без которой не будет работать ни один скрипт» я в корне не согласен! Вы знакомы с языком JavaScript?

  5. Денис:

    здравствуйте, спасибо за эту стилизацию селекта, все понятно. Но почему не работает .selectBox:focus ?

    1. admin:

      Здравствуйте, если хотите могу посоветовать другой стилизатор, сам только им пользуюсь http://dimox.name/jquery-form-styler/

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

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

X