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

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

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

Забыл пароль на iphone 3 способа удаления пароля с iPhone
C кем не бывае...
Более 200 автомобилей поддерживают CarPlay
Количество маш...
Где и как подобрать ремешки для Apple Watch
Даже в провере...
Viber аналог WhatsApp и Skype, бесплатные звонки и смс [Free]
Приложение для...
Как изменить язык интерфейса в Windows 8
При покупке ком...
Оптимизируем работу операционной системы на ноутбуке
Со временем ноу...
Как ускорить загрузку Windows 7
Всем привет, на...
Как прошить Android смартфон
Здравствуйте, д...
Финстрип №37 ноябрь 2015
Очередной меся...
Как легко создать адаптивную галерею для WordPress сайта с помощью плагина Envira
В вордпрессе ес...
Как отправить Email через WordPress используя Google SMTP сервер?
Добрый день дор...
Пора сделать перерыв
Пора сделать пе...
Продвижение сайта в блогах livejournal
Продвижение сай...
Нигерийские письма
Нигерийские пис...
Преимущества аудита it
В современной с...
Загон страниц в индекс твиттером
Загон страниц в...
АП ТИЦ от 25.08.2012
АП ТИЦ от 25.08...
Итог эксперимента с сайтом конкурентом!
Веселый Роджер...
Первый опыт передачи домена официально!
Все когда то б...
Как найти малоконкурентные трафиковые ключевые слова?
Сегодня статья ...
Как я накопил
Если это шеф, Д...
Стоит ли возраждать финстрипы?
Вопрос к читат...
Дайджест событий по середине августа
Привет тебе чи...
SEO блоги и АГС как так?
Блог дело тонк...
13750р Профит на который можно сдохнуть или???
Сегодня пришел...
10 000р на сайте в 4 страницы с Zippro
Нашел интересн...
Кейс наносайт по развлекательной тематике
Пиши годноту г...
Seo Hardcore GangBang sex video and free xxx porn прямо тут!
Пятничный треп...

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

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

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


*