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

HTML, CSS, jQuery: Меню для мобильных сайтов. Обучение

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

Рейтинг@Mail.ru