Как для кнопки добавить галочку css
Перейти к содержимому

Как для кнопки добавить галочку css

  • автор:

Как создать галочку или checkbox HTML.

Галочка (переключатель) или checkbox в html – это простое поле ввода input, которому присвоен атрибут type=»checkbox».

С помощью галочки пользователь может выбирать несколько решений из предложенных ему вариантов.

Это может выглядеть вот так:

Чтобы создать такой переключатель на HTML, нужно использовать следующий код:

Чтобы сделать галочку отмеченной по умолчанию, нужно добавить атрибут checked.

Давайте посмотрим, как это работает на практике.

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

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Как сделать чекбокс на HTML/CSS

Как сделать чекбокс на HTML/CSS

Сегодня вы узнаете как сделать чекбокс на HTML и добавить ему CSS стилей для лучшей совместимости с дизайном сайта.

Демонстрация

Чекбокс на HTML

Создадим блок с четырьмя чекбоксами, первый будет отмечен – с галочкой. Каждый чекбокс будет заключен в тег label, внутри которого поле для ввода, текст и элемент span, который предстоит стилизовать.

Как сделать чекбокс на HTML/CSS.

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

Как сделать чекбокс на HTML/CSS.

CSS для чекбокс

Строчный тег label, заменим на блочный (display: block), чтобы чекбоксы, встали друг под другом, user-select: none – запрещает пользователю выделять элемент.

.container display: block;
user-select: none;
>

Этот код прячет дефолтные браузерные стили для чекбокса. Мы делаем элемент полностью прозрачным за счет opacity, width и height с нулевым значением и на их месте, задаем кастомные стили для чекбокса.

.container input opacity: 0;
height: 0;
width: 0;
>

Создаем кастомные чекбоксы. Меняем размеры и цвет фона.

.checkmark height: 23px;
width: 22px;
background-color: #eec321;
>

При наведении курсора, делаем цвет фона немного темнее.

.container:hover input ~ .checkmark background-color: #ccc678;
>

Для отмеченного чекбокса, задаем другой цвет для фона.

.container input:checked ~ .checkmark background-color: #2196f3;
>

Прячем галочку для не отмеченных чекбоксов, применив псевдоэлемент after.

.checkmark:after content: «»;
position: absolute;
display: none;
>

Делаем видимой галочку, только для отмеченных чекбоксов.

.container input:checked ~ .checkmark:after display: block;
>

Рисуем и стилизуем галочку. Галочку мы рисуем на чистом CSS. Изобразим прямоугольник с белой рамкой, у двух сторон прямоугольника, рамки нет (нулевая ширина), получается прямоугольный угол, мы его поворачиваем на 45 градусов и получается галочка.

.container .checkmark:after left: 8px;
top: 6px;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
>

Как сделать чекбокс на HTML/CSS.

Посмотреть код целиком можно на Codepen

Создано 19.11.2018 10:19:41

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

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

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

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

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

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

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

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

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    Настроить радио кнопку по умолчанию с галочкой

    Author24 — интернет-сервис помощи студентам

    Как сделать чтобы по умолчанию уже стояла птичка и не редактировалась.

    За ранее Спасибо за помощь).

    Лучшие ответы ( 1 )
    94731 / 64177 / 26122
    Регистрация: 12.04.2006
    Сообщений: 116,782
    Ответы с готовыми решениями:

    Радио кнопка с галочкой
    Здравствуйте. Вот вопрос такой есть. Чекбоксы обычно идут с галочками по умолчанию, радио-кнопки с.

    Создать кнопку с галочкой
    добрый день , проблема в следующем надо создать кнопку где можно ставить и убирать галочку в " план.

    Как отметить радио кнопку по значению из базы
    Как отметить радио кнопку по значению из базы, название в бд хранится в числах. Короче говоря.

    Отправка формы при нажатии на радио кнопку
    Здравствуйте как можно отправить данные при нажатии на радио кнопку без submit Или можете пред6.

    Эксперт по компьютерным сетямЭксперт NIX

    12983 / 7378 / 796
    Регистрация: 09.09.2009
    Сообщений: 28,858
    не уверен, но попробуйте добавить ей параметры readonly и selected
    Регистрация: 09.03.2017
    Сообщений: 38

    Спасибо за ответ, но не поняла куда это добавлять.)

    Если еще кому понадобится, нашла пока такое решение:

    1 2 3 4 5
    div class="form-check"> label class="form-check-label"> input class="form-check-input" type="checkbox" checked="checked" disabled value=""> /label> /div>

    Эксперт по компьютерным сетямЭксперт NIX

    12983 / 7378 / 796
    Регистрация: 09.09.2009
    Сообщений: 28,858

    Лучший ответ

    Сообщение было отмечено Jolly1371 как решение

    Решение

    ЦитатаСообщение от Jolly1371 Посмотреть сообщение

    не поняла куда это добавлять

    видимо, никуда. ошибся я

    кстати, как и предполагалось, атрибут

    ЦитатаСообщение от Jolly1371 Посмотреть сообщение

    . дает нехороший результат — значение чекбокса при отправке формы не отсылается
    тырнеты предлагают запретить смену с помощью яваскрипта, типа такого:

    ЦитатаСообщение от Jolly1371 Посмотреть сообщение

    1 2 3 4 5
    div class="form-check"> * label class="form-check-label"> * * input class="form-check-input" type="checkbox" checked="checked" onclick="return false;" value=""> * /label> /div>

    Эксперт JSЭксперт HTML/CSS

    3825 / 2675 / 1521
    Регистрация: 12.07.2015
    Сообщений: 6,672
    Записей в блоге: 4

    1 2 3 4 5
    div class="form-check"> label class="form-check-label"> input class="form-check-input" checked type="checkbox" value=""> /label> /div>
    1 2 3
    .form-check-label{ pointer-events:none; }

    87844 / 49110 / 22898
    Регистрация: 17.06.2006
    Сообщений: 92,604
    Помогаю со студенческими работами здесь

    Раскрыть содержимое тега p при нажатии на радио-кнопку
    Ребята помогите пожалуйста начинающему программисту. Есть код: <div> .

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

    Не устанавливается флажок checked (radio button) в onChange не меняется при нажатии на радио кнопку
    Здравствуйте, я в React JS новый, хотел бы кое что уточнить Код есть, в базе данных все корректно.

    Как настроить по умолчанию внешнею видеокарту ?
    купил себе мат плату asus b150m-k и к нему новую видеокарту gigabyte gtx 1050ti, долго не мог.

    Поиск статьи в старом журнале, может кто помнит. (Радио, радио-любитель,.)
    Всем доброго дня! Когда-то ооочень давно читал статью в одном из журналов по радио-электронике.

    Настроить Grub для запуска по-умолчанию без показа меню
    Не могу понять почему не настроивать Grub GRUB_DEFAULT=saved #запуск последнего выбранного.

    Или воспользуйтесь поиском по форуму:

    Флажок checkbox

    Флажок checkbox представляет собой элемент (галочку или птичку) HTML формы, который может иметь два состояния: отмечен и не отмечен.

    Флажок создается с помощью тега input с атрибутом type в значении checkbox . Внешний вид флажка:

    Отмеченный чекбокс будет посылать на сервер содержимое атрибута value . Если атрибута value у чекбокса нет — он будет посылать строку «on». Если чекбокс не отмечен — ничего не будет присылаться на сервер не зависимо от наличия атрибута value .

    Пример

    Давайте сделаем два флажка checkbox: пусть первый будет отмечен (так как ему дан атрибут checked ), а второй — нет:

    Пример . Заблокированный чекбокс

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

    Пример . Заблокированный и отмеченный чекбокс

    А теперь давайте заблокируем флажок, в отмеченном состоянии, атрибутом disabled и зададим ему атрибут checked :

    Смотрите также

    • радио переключатели,
      с помощью которых можно сделать выбор
    • атрибут checked ,
      который делает флажок чекбокс отмеченным
    • псевдокласс checked ,
      который задает стили для отмеченных чекбоксов
    • атрибут disabled ,
      который блокирует элементы форм
    • тег label ,
      который задает подсказку для чекбокса

    Добавить комментарий

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