Как изменить цвет галочки в checkbox css

Как изменить цвет галочки в checkbox css

Чтобы изменить цвет галочки в checkbox с использованием CSS, вы можете воспользоваться псевдоэлементом `::before`. Вот подробная инструкция:

1. HTML-разметка:
«`html

Мой Checkbox
«`

2. CSS-стили:
«`css
/* Скрыть оригинальную галочку */
input[type=checkbox] appearance: none;
— webkit-appearance: none;
— moz-appearance: none;
width: 20px;
height: 20px;
border: 1px solid #333;
>

/* Создать новый стиль галочки */
input[type=checkbox]::before content: ;
display: block;
width: 100%;
height: 100%;
background-color: white; /* установите здесь желаемый цвет галочки */
border: 1px solid #333;
box-sizing: border-box;
>

/* Отобразить галочку, когда чекбокс отмечен */
input[type=checkbox]:checked::before content: \2713; /* символ Unicode для галочки */
text-align: center;
font-size: 14px;
line-height: 20px;
color: #333; /* установите здесь желаемый цвет галочки */
>
«`

3. Примените стили к вашему checkbox, используя его идентификатор или класс:
«`html

4. После применения стилей, галочка в вашем checkbox должна изменить свой цвет. Вы можете настроить цвет галочки, изменяя значение `background-color` и `color` в CSS-стилях.

Как изменить цвет галочки в checkbox css

Оформление элементов формы — это старая проблема. Ситуация несомненно улучшается, но финала пока не видно. С появлением псевдо-контейнеров :after и :before стало возможным без дополнительных элементов и скриптов кастомизировать элемент INPUT:CHECKBOX.

В разных браузерах этот элемент будет выглядеть по разному. Chrome, Opera, IE, Yandex и прочие — будут по мере сил и фантазии разработчиков выводить checkbox с собственным оформлением.

Квадрат и галочку нельзя изменить стандартными стилями вроде:

Поэтому стоит задача полностью заменить вывод стандартного элемента на свой, и мы сделаем это, используя только CSS.

План действий такой:

1. Скрываем вывод чек-бокса;
2. Формируем нужный внешний вид чекбокса в псевдо — элементе label:before;
3. Дополнительные стили формируют внешний вид текущего статуса.

Важно, чтобы элемент Label был связан с чекбокс (через параметр for), тогда нажатие на метку передаётся на связанный элемент, и все работает как нужно без дополнительных скриптов.

Цвет птички чекбокса и лейбла

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.4.14.41981

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

CSS стили для Checkbox

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

Все примеры можно посмотреть на codepen

HTML разметка для примера:

— Родительская label обертка с классом checkbox и классом стилей style-a , используется для того, чтобы активная область была на всех внутренних элементах, то есть можно нажимать не только на сам checkbox, но и на область описания checkbox

— обязательный скрытый input для определения состояния checkbox

— область отметки checkbox

Отметка добавляется через псевдо-элемент :after относительно

— область для описания checkbox, может быть текстом, изображением, элементом и так далее

Небольшое отступление для понимания:

(тильда) выбирает соседние элементы, находящиеся на том же уровне, но после выбранного элемента

Проще всего понять на примере:

Также для более логичного поведения при установке размеров элементов использую box-sizing: border-box; для все элементов

Если в проекте не используете box-sizing: border-box; , то можно установить это свойство только для стилизованного checkbox

Стилизация флажков (чекбоксов) в CSS

Несмотря на то, что в последних версиях браузеров (как минимум самого популярного — Google Chrome) чекбоксы стали выглядеть симпатичнее, получили цвет и даже некоторую визуальную объемность, все равно для уникального дизайна их требуется кастомизировать. В этой статье мы научимся изменять внешний вид флажков с помощью обычного CSS.

1. Простой пример

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

Если посмотреть на внешний вид чекбокса, то обычный человек не увидит ничего необычного: цвет поменялся и все.

Только вот проблема в том, что обычное свойство CSS color применительно к checkox’у не даст никакого видимого результата, поэтому даже для обычной его окраски приходится задействовать что-то из псевдоэлементов:

• ::after
• ::before
• ::cue
• ::first-letter
• ::first-line
• ::selection
• ::slotted

Чаще всего применяются ::after и ::before. Как несложно догадаться из английского перевода названий, эти псевдо позволяют стилизовать определенные части родительского элемента, в данном случае это чекбокс.

2. Как осуществляется создание кастомного чекбокса или переключателя

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

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

Стандарты HTML и CSS дают не так много возможностей для изменения внешнего вида чекбокса. С помощью стилей можно изменить его размер и цвет — по большому счету и все. Но нам этого мало, дизайнер в фигме или фотошопе создал уникальный флажок и теперь надо его как-то воплотить в код. Как это делается?

В большинстве случаев чекбоксы просто скрываются, поверх них накладывается другой элемент, меняющий свой внешний вид по клику мышкой. Сам же переключатель также хоть и скрыт, но тоже работает с событием (хоть визуально и не подает виду). А иногда и не работает; иногда состояние его полностью контролируется label с помощью, например, for.

3. Создание стильного чекбокса

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

Кода много, но пугаться не стоит — тут все очень просто. Скрываем инпут чекбокса, затем с помощью псевдоэлементов и в зависимости от состояния чекбокса меняем его внешний вид. Текст для разных состояний флажка мы берем из атрибутов data-onlabel и data-offlabel.

Атрибуты «data» обычно используются в JS, например, очень распространенная библиотека jQuery активно работает с ними, но, как видите из нашего примера, и в CSS можно также задействовать их.

4. Еще примеры по кастомизации checkbox и label

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

Похожие публикации:

1. Как сделать из ссылки кнопку в css
2. Как сделать картинку на задний фон в css
3. Как сделать кнопки в css
4. Как сделать контур в css

Как изменить цвет checkbox css

Чтобы изменить цвет галочки в checkbox с помощью CSS, можно использовать псевдоэлемент ::before или ::after и задать ему нужный цвет фона.

«`
/* CSS код */
input[type=checkbox] — webkit-appearance: none; /* Убираем стандартный внешний вид */
— moz-appearance: none;
appearance: none;
width: 20px; /* Задаем ширину и высоту элемента */
height: 20px;
border: 2px solid #ccc; /* Задаем цвет рамки */
background-color: white; /* Задаем цвет фона галочки */
outline: none; /* Убираем контур при нажатии */
cursor: pointer; /* Делаем указатель мыши в виде руки */
>

/* Создаем псевдоэлемент ::before для галочки */
input[type=checkbox]::before content: \2713; /* Unicode символ для галочки */
display: inline-block;
width: 20px;
height: 20px;
background-color: #00cc00; /* Задаем цвет фона галочки */
color: white; /* Задаем цвет символа галочки */
line-height: 20px;
text-align: center;
font-size: 14px;
visibility: hidden; /* Скрываем галочку */
>

/* Показываем галочку при выборе checkbox */
input[type=checkbox]:checked::before visibility: visible;
>
«`

В данном примере мы используем псевдоэлемент ::before для создания символа галочки и задаем ему нужные стили. С помощью селектора :checked мы включаем галочку при выборе checkbox.

Вы можете изменять значения цветов (#ccc, white, #00cc00 и др.) на нужные вам в соответствии с вашим дизайном.

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

Стилизация флажков и переключателей с использованием CSS3

При создании CSS стилей для HTML форм, разработчики часто сталкиваются с невозможностью непосредственно менять внешний вид элементов флажков (checkboxes) и переключателей (radio buttons). Рассмотрим как можно обойти это ограничение при помощи инструментария CSS3 и без использования какого-либо кода JavaScript.

Итак, для начала добавим несколько обычных флажков и переключателей на форму:

/* Мои флажки */ 
 Флажок 1 
 
 Флажок 2 
 
 Флажок 3 
 /* Мои переключатели */ 
 Переключатель 1 
 
 Переключатель 2 
 
 Переключатель 3 
 

Перенесем стандартное отображение элементов за область видимости и добавим отступы к соседствующим меткам:

input[type="checkbox"]:checked, input[type="checkbox"]:not(:checked), input[type="radio"]:checked, input[type="radio"]:not(:checked) < position: absolute; left: -9999px; >input[type="checkbox"]:checked + label, input[type="checkbox"]:not(:checked) + label, input[type="radio"]:checked + label, input[type="radio"]:not(:checked) + label

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

input[type="checkbox"]:checked + label:before, input[type="checkbox"]:not(:checked) + label:before, input[type="radio"]:checked + label:before, input[type="radio"]:not(:checked) + label:before < content: ""; position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; border: 1px solid #dddddd; background-color: #ffffff; >input[type="checkbox"]:checked + label:before, input[type="checkbox"]:not(:checked) + label:before < border-radius: 2px; >input[type="radio"]:checked + label:before, input[type="radio"]:not(:checked) + label:before

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

input[type="checkbox"]:checked + label:after, input[type="checkbox"]:not(:checked) + label:after, input[type="radio"]:checked + label:after, input[type="radio"]:not(:checked) + label:after < content: ""; position: absolute; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; >input[type="checkbox"]:checked + label:after, input[type="checkbox"]:not(:checked) + label:after < left: 3px; top: 4px; width: 10px; height: 5px; border-radius: 1px; border-left: 4px solid #e145a3; border-bottom: 4px solid #e145a3; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); >input[type="radio"]:checked + label:after, input[type="radio"]:not(:checked) + label:after

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

Обратите внимание, что селекторы :before и :after позволяют добавлять содержание непосредственно до и после содержимого самой метки. Так как для меток мы задали относительное позиционирование (position: relative), то можем задавать контекстное абсолютное позиционирование для их содержимого.

Осталось скрыть индикаторы выбора, когда элемент не выбран, и, соответственно, отображать их, когда элемент находится в выбранном состоянии:

input[type="checkbox"]:not(:checked) + label:after, input[type="radio"]:not(:checked) + label:after < opacity: 0; >input[type="checkbox"]:checked + label:after, input[type="radio"]:checked + label:after

Добавим, что описанное здесь решение работает во всех современных версиях браузеров Chrome, Firefox, Safari, Opera, а также, начиная с версии 9, и в Internet Explorer.

Полностью CSS определения можно загрузить здесь.