Главная » WordPress » 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

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

О admin

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

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*

x

Check Also

Методика продвижения сайта контентом

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

Рейтинг@Mail.ru