<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Выбор из выпадающего списка в HTML

Выбор из выпадающего списка в HTML

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

Выбор из выпадающего списка в HTML.

Сегодня мы разберем один из таких примеров оформления поля выбора, применяя HTML/CSS и иконку Font Awesome. Но начнем мы как обычно с разметки документа.


HTML-код

Внутри тега select находятся пункты выпадающего списка option. В свою очередь теги select и form вложены в общий контейнер div. Тег form должен присутствовать обязательно, если данные впоследствии будут отправляться на сервер.

<body>
<div class="box">
  <form>
    <select>
      <option>Красный</option>
      <option>Синий</option>
      <option>Розовый</option>
      <option>Чёрный</option>
      <option>Белый</option>
    </select>
  </form>
</div>
</body>

Позиционируем контейнер с классом box в центре окна.

.box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Выбор из выпадающего списка в HTML.

Заранее подключаем иконочный шрифт до закрывающего тега head.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

Стилизация селектора select

Задаем размеры для поля выбора - 250x50 пикселей и делаем поля для пунктов по 10 пикселей со всех сторон.

.box select{
    width: 250px;
    height: 50px;
    padding: 10px;
}

Убираем рамку и обводку:

border: none;
outline: none;

Прописываем фиолетовый цвет фона, название, цвет и размер шрифта для списков.

background: #ab05af;
font-family: 'Russo One', sans-serif;
color: #fff;
font-size: 20px;

Создаем вокруг поля тень.

box-shadow: 0 5px 20px rgba(0,0,0,.3);

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

Выбор из выпадающего списка в HTML.

Вероятнее всего дизайнер поставит на место крошечного треугольника - иконку из шрифта Font Awesome.

Выбор из выпадающего списка в HTML.

Так намного красивее смотрится, а писать код все равно надо верстальщику. Какое здесь может быть решение? Мы не будем трогать HTML-код, а задействуем псевдо-элемент before.


Псевдо-элемент before для .box

Первое, что надо сделать - это прописать код иконки и название шрифта "Font Awesome 5 Free". Выбираем на сайте fontawesome.com нужную иконку, обозначающую "выбор" и копируем её код.


Выбор из выпадающего списка в HTML.

.box::before {
    content: "\f150";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 28px;
    background: #da00e0;
    pointer-events: none;
}

Далее позиционируем абсолютно, указываем размеры 50x50, белый цвет у иконки, фон светло-фиолетовый. Задаём очень важное свойство pointer-events: none. Это значит, что псевдо-элемент before не является объектом события мыши, а значение none предлагает событию "выбора мышью" проходить на нижний слой и обращаться к элементу, находящемуся под ним - к тому маленькому треугольнику. Треугольник никуда не исчез, просто он находится под псевдо-элементом before, служащий лишь украшательством. Кликая по красивой иконке, на самом деле срабатывает "некрасивый" треугольник и мы делаем свой выбор.


Эффект при наведении

На событие мышью он никак не влияет, но так интереснее. При наведении курсора на иконку меняется цвет фона.

.box select option:hover {
    background: #da00e0;
}

.box:hover::before {
    background: #9b03a0;
}

Если для кого-то данный урок слишком сложный, то посмотрите мой видеокурс "HTML5 и CSS3 с Нуля до Гуру".

Посмотреть демо-версию и код.

See the Pen Выбор из выпадающего списка в HTML by porsake (@porsake) on CodePen.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.