Создание стилей для элементов checkbox. CSS

Опубликованно 19.09.2018 00:36

Форма является одной из самых важных частей любого веб-узла. Используется для создания форм регистрации, обратной связи. На таких сайтах, как mail.ru, "Вконтакте" и другие, которые могут просматривать регистрационные поля, в которые необходимо вводить не только имя пользователя и пароль и личную информацию. Это может быть пол, возраст, личные предпочтения и взгляды, и так далее.

При выборе пола дают два варианта: мужской и женский. Представлены в виде полей выбора. Эти поля создаются с помощью тега HTML checkbox.

Поле в HTML не всегда совпадают с дизайном сайта, так что вы должны изменить. В этой статье мы поговорим с вами о том, как сделать стили checkbox CSS. Что такое checkbox?

Это значение атрибута тега input, который содержится в теге form. Часто используется для указания личной информации пользователя, такие, как ваши личные предпочтения.

Его отличие от радио, в котором Допускается выбор нескольких полей одновременно. Создание checkbox. HTML

Чтобы разместить флажки на веб-сайте, необходимо создать форму. Для этого используется пар тега form. Содержит 2 атрибута action и method. Первая ссылка на обработчик формы, и второй-метод индексации и обработки полученных значений.

Таким образом, мы создали форму, теперь надо поместить же флажки. Для этого необходимо использовать один раз в тег input. - Это метка, которая используется для создания всех полей формы.

Нам нужны только флажки. Для их создания, значение атрибута type тега input, значение checkbox.

У нас есть пустые флажки, нужно добавить легенду. Можно писать после тега input.

Для checkbox правильно работать, измените значение атрибута value и name. Name - это обязательное для драйвера, установите его значение равным имени поля. Value (значение чекбокса) - необязательный атрибут, но лучше его использовать для удобства.

Есть еще один атрибут checked. Он не имеет никакого значения, используется для выбора области загрузки. То есть, если вы, ребята этот атрибут будет выбран по умолчанию.

Вот пример создания ребята:

Оформление checkbox. CSS

Стандартные флажки, могут не подходить для вашей конструкции. Теперь мы расскажем, как создать дизайн для checkbox CSS.

При использовании стандартных и простых способов, а также расположение и позиционирование ничего не может изменить.

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

Прежде чем приступить к изменению свойств checkbox CSS документе, необходимо исправить наш HTML код. Мы добавляем классы, идентификаторы и метки label. Все это необходимо для стилизации.

Мы создадим 3 тега label 3 тега input. Каждая метка должна быть напротив поля ввода. Это парный тег, который имеет обязательный атрибут for. Это необходимо для привязки данного тега в поле формы.

Мы создаем 3 личности для наших полей: check1, check2, check3. Эти же значения указываем в атрибуте for. Теперь они привязаны к Xbox.

Далее для каждого input указываем класс - check. В качестве селектора для работы в оформлении checkbox CSS.

Теперь, чтобы добавить свой код CSS, чтобы она выглядела так:

Есть некоторые стили, которые не относятся к себе парней, но это необходимо для общего оформления страницы.

Если вы все сделали правильно, теперь ваша форма флажков, будет иметь нормальный вид. Автор: Бойся Обратиться Ко Егор 15 Августа, 2018

Категория: Hi-Tech