Как изменить оформление стандартного чекбокса

Чекбокс на сайте — элемент интерфейса в виде небольшого квадрата, в котором пользователь может поставить или снять галочку (флажок), чтобы, например, согласиться с вашими условиями или отказаться от них.

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

На GetCourse чекбоксы используются в следующих случаях:

• Когда необходимо, чтобы при регистрации или создании заказа пользователь согласился с политикой конфиденциальности или условиями оферты.
  
  Подробнее в статье → «Как добавить во все формы подтверждение согласия с офертой или с условиями обработки персональных данных».

• Когда необходимо, чтобы при регистрации или создании заказа пользователь дал согласие на получение рассылок.
  
  Подробнее в статье → «Как добавить чекбокс для согласия на получение рекламных рассылок».

• Когда на форму добавлено собственное дополнительное поле с типом «Да/Нет», например, чтобы пользователь мог согласиться с вашими внутренними правилами или условиями.
  
  Подробнее в статье → «Как использовать дополнительные поля на GetCourse».

• Когда какое-либо согласие/подтверждение нужно получить в анкете.
  
  Подробнее в статье → «Как работать с анкетами на GetCourse».

• Когда поле согласия нужно разместить в уроке, чтобы ученик мог согласиться с какими-то условиями при прохождении задания.
  
  Подробнее в статье → «Задания в уроках».

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

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

Рассмотрим несколько примеров кода, который вы можете адаптировать под себя и свои задачи. О том, как добавить подготовленный код в аккаунт на GetCourse, рассказываем в разделе ниже [перейти ↓].

Примеры кода:

• Изменение основного цвета чекбокса
• Изменение размера чекбокса
• Установка собственной иконки чекбокса

Чтобы изменить основной цвет чекбокса с проставленной галочкой, используйте следующий код ниже, где #3a9f21 — hex-код цвета, который вы можете заменить на свой. Узнать hex-код нужного цвета можно на сторонних сервисах, например, → get-color.ru.

input[type="checkbox"] {
   accent-color: #3a9f21;
}

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

input[type="checkbox"] {
   width: 20px;
   height: 20px;
}

Если вы хотите полностью изменить оформление чекбокса:

1. Найдите или создайте подходящую иконку галочки без рамки в формате SVG или PNG. Желательно, чтобы она была такого же размера, как и сам чекбокс, например, 20×20px. Бесплатные иконки в формате png можно скачать на → flaticon.com.
2. Загрузите ваше изображение в файловое хранилище аккаунта.

3. Скопируйте ссылку на загруженное изображение.

4. Используйте код ниже, чтобы отменить стандартное оформление чекбокса:

5. Добавьте к нему следующий код, чтобы настроить оформление чекбокса в неактивном состоянии. Рядом со свойствами, которые можно менять по своему усмотрению, добавлены комментарии, выделенные знаками /*...*/

6. Добавьте к имеющемуся коду последнюю часть, чтобы изменить оформление чекбокса в активном состоянии. Рядом со свойствами, которые можно менять по своему усмотрению, добавлены комментарии, выделенные знаками /*...*/

В итоге у вас получится следующий код, который можно добавить к определенному блоку, на страницу или в урок:

С указанными в коде значениями чекбокс выглядит следующим образом:

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

• Изменение чекбокса в отдельном блоке
• Изменение всех чекбоксов в уроке/на странице
• Изменение чекбокса на странице со старым конструктором
• Изменение чекбокса на всех страницах аккаунта

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

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

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

Чтобы добавить CSS в стили такой страницы, нажмите на </>.

Чтобы применить код ко всем страницам аккаунта, его необходимо обернуть в теги <style>...</style> и добавить в настройки аккаунта.

Доступ к данному разделу имеют:

• владелец аккаунта,
• ответственный администратор.

Для добавления кода:

1. Перейдите в раздел «Профиль» — «Настройки аккаунта» — «Настройки».

2. Вставьте код, обернутый в теги <style>...</style>, в блок «Дополнительные теги для HEAD»:

3. Сохраните настройки в конце страницы. Код применится в течение 10 минут.

Еще больше информации о верстке вы сможете найти в следующих статьях:

• «Основы CSS для GetCourse»
• «Инструменты разработчика в браузере: как быстро поправить верстку страницы»
• «Адаптация лендинга GetCourse под мобильные устройства»
• «Темы: как изменить оформление тренингов или страниц аккаунта»
• «Прелоадер: как добавить на страницу экран загрузки»