Не пропусти
Главная 20 Интернет 20 HTML, CSS: Делаем стильный тег Select Box с помощью CSS

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

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

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

Gear. Club в мире мощных моторов и скоростных трасс [Free]
Gear.Club – го...
Glazba – музыкальный плеер ВК не из App Store [Free]
Не ищите плеер...
Adode Photoshop Sketch скетчбук для iPhone [Free]
Продолжаем тем...
Apple закроет бутик по продаже Apple Watch в Париже
Как известно, ...
Как сменить ремешок на Apple Watch
Компания Apple...
Замена Skype для iPhone обзор SIP клиентов
В современном...
Что это за клавиша Numpad 1
Компьютерная кл...
Как включить все ядра процессора
Большинство про...
ApiShop на товар дня!
Новая уникальн...
Монетизация по максимуму от Admitad!
Я считаю Адмит...
Партнерство Binpartner – еще больше денег от сотрудничества с брокером
  Binpartner.co...
Возьму заказы создание сайтов на WordPress
Сайты на заказ...
Финстрип №40 сентябрь 2016
Финансовый стр...
Покупка ссылок дело не простое!
Сегодня в рубр...
Гуф умер
Гуф умер Всем п...
Проверка скорости интернета
Проверка скорос...
Дорвеи ВКОНТАКТЕ
Дорвеи ВКОНТАКТ...
Извлекаем url миниатюры записи поста WordPress
С помощью это...
Как удалить поле URL (сайт) в форме комментарий WordPress
Если Вам надо...
Про высшее образование в России
Про высшее обра...
Купоны Google AdWords
Купоны Google A...
User-generated content
User-generated ...
Как заработать на сайте с рекламы?
Добрый день дор...
Каталог партнерских программ. Продолжение
Каталог партнер...
100 человек в сутки. Как добиться? Часть 2
Итак, это вто...
Как выбрать цвет для сайта? Секреты успеха!
Важным вопрос...
Мой SEO софт
Мой SEO софт Вс...
Как скруглить края или углы у картинки онлайн
Добрый день дру...

О admin

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

x

Check Also

Что такое html тег address и как он работает?

Всем хорошего и бодрого утра! На линии обучения азам сайтостроительства Макс Метелев и сегодня мы рассмотрим такой интересный тег, который применяется в html 5 версии – address. В него можно включить информацию об авторе и ...

Как правильно подключить шрифты в CSS на сайте?

Всем привет дорогие друзья! Наконец то к сайту вернулась посещаемость, а то с праздниками народ вообще подзабил на полезные статьи. Ну это понятно, кто в праздники будет что-то читать. Сегодня для вас подготовил хорошую статью ...

Как выбрать бесплатный конструктор сайта?

Всем привет дорогие друзья и читатели моего блога! Средства, облегчающие процесс создания веб-сайтов создаются постоянно, с тех пор как к Интернету получил доступ обычный обыватель. Но тенденции и технологии быстро меняются, есть множество различных методов ...

Идея для бизнеса: разработка иконок для сайта

Основной принцип. Когда человек первый раз попадает на веб сайт, то первое на что он обращает свое внимание – это иконки для заголовков. Именно по ним, а не по материалу идет выбор документа для чтения. ...

Как скруглить углы и края в фотошопе

Рад снова и снова видеть вас мои дорогие читатели! Сегодня очередной урок по фотошопу и расскажу сегодня как скруглить края (углы) у фото или картинки в фотошопе. На самом деле сложного здесь ничего нет. Все ...

Как скруглить края или углы у картинки онлайн

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

Оптимизация картинок на сайте с помощью полезных сервисов и программ

Всем привет друзья! В этой статье я расскажу про важность оптимизации изображений и картинок на вашем сайте, без разницы используете ли вы CMS WordPress, Joomla или же у вас просто статический сайт. Оптимизация каждой картинки ...

Как подобрать цвета для своего сайта? Обзор 4 сервисов

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

Разработка качественного и продающего дизайна сайта

В реалиях современного интернет-бизнеса дизайн сайта уже не является исключительно эстетическим элементом, он выполняет рекламные функции, а главное – может стать конкурентным преимуществом. Существует немало примеров, когда стильный и практичный дизайн становился визитной карточкой успешного ...

Скликивание рекламы

Скликивание рекламы Всем привет! Данная статья будет посвящена такому вопросу, как скликивание рекламы. Частично суть проблемы была описана в данном посте, но чаще всего под скликивание попадает реклама по коммерческим запросам. Даже для тех, кто ...

Promo-soft AddStudio

Promo-soft AddStudio Всем привет! На данном блоге давно не было обзоров SEO софта и поэтому сейчас постараюсь исправиться. На этот раз виновником торжества; стала программа AddStudio от Promo-soft. Что примечательно это полностью отечественный продукт, так ...

Promo-soft Add2Board

Promo-soft Add2Board Всем привет! Я продолжаю обзор SEO софта от компании Promo-soft и на этот раз речь пойдет про Add2Board. Основное предназначение программы  автоматическая рассылка на доски объявлений. До этого чтобы ингда разослать объявления я пользовался ...

Promo-soft AddSite

Promo-soft AddSite Всем привет! Как вы уже, наверное, заметили я делаю обзор всей линейки программ от Promo-soft  и сегодня на очереди AddSite . До этого мне приходилось работать лишь с allsubmitter и так не доведенной ...

Xrumer 7.0.12 Elite and Hrefer 3.85 взломан

Xrumer 7.0.12 Elite and Hrefer 3.85 взломан Всем привет! Собственно новость не первой свежести, но до этого многие полагали что это фейк и что взломанного хрумера 7 версии не существует в природе. Еще давно не ...

Key collector

key collector Всем привет! В этой статье будет дан небольшой обзор программы, без которой не представляют себе жизнь многие оптимизаторы key collector ( кей коллектор). Не пытайтесь найти ее на варезниках или скачать бесплатно крякнутую, ...

Хитрый способ сбора качественной пробиваемой базы для XRUMER

Хитрый способ сбора качественной пробиваемой базы для XRUMER Всем привет! Ни для кого не секрет, что каким бы замечательным не был софт для массовой регистрации/рассылки, без надлежащего качества баз он почти не имеет ценности. Базы ...

Рейтинг@Mail.ru