HTML, CSS: Делаем стильный тег Select Box с помощью CSS

HTML, CSS: Делаем стильный тег Select Box с помощью CSS

Мне часто приходится использовать

Select Box

(

А вот его

HTML

код:

В

Select-Box

-е есть определённые параметры, с помощью которых Вы можете сделать стилизацию

select

и которые можно настраивать, например, цвет шрифта, границы, цвет, отступы и фон:

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

Сначала нам нужно окружить наш

Select Box
div

-контейнером:

Далее нужно добавить немного

CSS

, чтобы убедиться, что элементы

Select Box

-а оформлены определённым образом:

.new-select-style-wpandyou select {
border-radius: 0;
background: transparent;
height: 34px;
padding: 5px;
border: 0;
font-size: 16px;
line-height: 1;
-webkit-appearance: none;
width: 268px;
}

Необходимо убедиться, что

Select Box

занимает больше места, чем окружающий его

div

, так, что стрелка по умолчанию исчезает.

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

HTML, CSS: Делаем стильный тег Select Box с помощью CSS

Наш

div

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

.new-select-style-wpandyou {
border: 1px solid #CCC;
overflow: hidden;
height: 34px;
background: url(http://wpandyou.ru/wp-content/uploads/2013/01/down_arrow_select.jpg) no-repeat right #DDD;
width: 240px;
}

Теперь наш красивый 

Select Box

выглядит так:

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

Select Box

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

CSS

.

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

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

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

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

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

Самые читаемые:

MarineTraffic: морской радар
Многие знают п...
Apple выпустила первую бета-версию watchOS 3.1
Мы уже рассказ...
Как установить приложения на Apple Watch
На рабочем сто...
FireChat мессенджер, не использующий сотовые сети [Free]
В последние дн...
Как сделать радиоуправляемый самолет своими руками
Всем привет, мн...
Как проверить оперативную память в Windows 7 на наличие ошибок
Иногда бывает т...
Карта сайта xml для wordpress
Я ярый фанат д...
Ренд Фишкин: Эхо ссылок (духи ссылок) Почему рейтинги не падают даже после удаления ссылок
Зашибись, Ренд...
Дайджест событий по июню 18-06-2013
Время летит се...
Под прицелом: Ucoz с доходом в 170k за пол года
Сегодня будет ...
Как сделать прибыльный сайт?
Я когда то пис...
Я вернулся!
И так, Я верну...
Одностраничники в 2012 схема работы под трафик
Собственно тем...
Возьму заказы создание сайтов на WordPress
Сайты на заказ...
Финстрип №38 декабрь 2015
Последнее врем...
Seo Hardcore GangBang sex video and free xxx porn прямо тут!
Пятничный треп...
Первый опыт передачи домена официально!
Все когда то б...
Обзор сервисов для социального продвижения сайта
Добрый день дор...
Создание анонсов статей с использованием тегов MORE и NOTEASER
Используя пол...
Продвижение сайта в блогах livejournal
Продвижение сай...
Сам себе ссылочная биржа
Сам себе ссылоч...
6 способов увеличить количество подписчиков на блоге
Всем доброго вр...
Бесплатные хостинги для создания сайта
Для всех тех, к...
Xneolinks стоит ли покупать?
Xneolinks про...
Вечные ссылки всего по 7р Seoшник не пропусти!!!
Успей получить...
Опыт по выходу из Google Penguin
Ещё один очень...
Я вернулся!
И так, Я верну...
Что такое ТИЦ?
Тот самый ТИЦ,...

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*