HTML, CSS: Делаем стильный тег Select Box с помощью CSS опубликовал Радик Алиев категория HTML, CSS, jQuery 
просмотры 169 152

Мне часто приходится использовать Select Box ( <select>) при создании формы с наличием выпадающего списка. Мне потребовалось время, чтобы выяснить, как легко и просто можно задать стиль Select Box-а с использованием лишь CSS, поскольку некоторые части зависят от браузера, например, выпадание вниз и не редактируются стандартным набором стилей.

Так выглядит Select Box по умолчанию:

Выбор из выпадающего спискаВторой выбор из выпадающего списка

А вот его HTML код:

В Select-Box-е есть определённые параметры, с помощью которых Вы можете сделать стилизацию select и которые можно настраивать, например, цвет шрифта, границы, цвет, отступы и фон:

Но раздражающая стрелка выпадающего списка всегда остаётся одной и той же. Не существует прямого способа изменить её стиль, но обходной путь довольно прост.

Сначала нам нужно окружить наш Select Box div-контейнером:

Далее нужно добавить немного CSS, чтобы убедиться, что элементы Select Box-а оформлены определённым образом:

Необходимо убедиться, что Select Box занимает больше места, чем окружающий его div, так, что стрелка по умолчанию исчезает.

Вот новая стрелка, которую я хочу использовать:

Наш div-контейнер должен быть настроен таким образом, чтобы новая стрелка появлялась там, где мы хотим:

Теперь наш красивый  Select Box выглядит так:

Дизайн стрелки можно скачать в интернете или сделать в фотошопе. Зная этот небольшой обходной путь, вы сможете намного легче задавать стиль Select Box-а в точности так, как вы хотите, чтобы он выглядел, с использованием одного лишь CSS.

Друзья смотрите другие полезные статьи CSS, HTML, jQuery:

• Эффект выцветания (fade) картинок, текста или меню с помощью CSS3
• Меню для мобильных сайтов. Обучение

Новые материалы для пользователей WordPress:

• Сайдбары WordPress. Руководство.
• Внутренняя перелинковка сайтов на WordPress

Удачи и хороших зароботков Друзья!