Галочка в checkbox — один из наиболее распространенных элементов управления веб-страницами, позволяющий пользователю выбирать одну или несколько опций. По умолчанию, цвет галочки определяется браузером и может отличаться в разных операционных системах и на разных устройствах. Однако, с использованием CSS, мы можем изменить цвет галочки и придать ей индивидуальный стиль, соответствующий нашему дизайну.
Для изменения цвета галочки в checkbox на CSS, мы можем использовать псевдоэлемент ::before и псевдокласс :checked. Псевдоэлемент ::before создает дополнительный элемент перед содержимым выбранного элемента, в нашем случае — галочки. Псевдокласс :checked применяется к элементу checkbox, когда он выбран пользователем.
Применяя стили к псевдоэлементу ::before и псевдоклассу :checked, мы можем задать желаемый цвет галочки. Для этого нужно указать свойство background-color и задать значение соответствующего цвета. Например, если мы хотим сделать галочку красной, то нужно указать background-color: red;
Как стилизовать цвет галочки в checkbox с помощью CSS?
Для изменения цвета галочки в элементе checkbox можно использовать CSS. Вот несколько способов, как это сделать:
- Используйте псевдоэлемент ::before или ::after и свойство content. Добавьте следующий CSS-код:
- Используйте свойство background-image и base64-кодированную иконку галочки. Добавьте следующий CSS-код:
- Используйте CSS свойство filter. Добавьте следующий CSS-код:
input[type="checkbox"]::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: green; /* измените цвет галочки */
margin-right: 5px;
vertical-align: middle;
}
input[type="checkbox"]:checked::before {
content: "✔";
}
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABfUlEQVRYR9WXU0tDQRCFv4OytghQgew6EZCxUIW4tzBQe09AZhFEVeFJUfEQzYmMwKTE6Sgy6bdMczQyKeEsymviUPzvlze6LZndma2NrdXhxeXtyfz6Hy0yHxrmlm5iH4OSrzXNsacYBl7uziXcFkOnWs2ydHCGwJ4ZW5J8bf9gTsUvZO6YCPHTbhrvsnX1Og8leBzwiYK1DSu1DJM4wi7HedG7HM8wmONdXJE6y9OAQgF8cy+ML5x5yxAALQSlw8p2QKd+O/vp2/JulNNP/6gQjPjUbZHVTgIAi6ABEBp24ITiEAu7JKOaKSK01NTYaj4fSrrWjNoViCxx+P4MqwmmcJCPakOAv6mBRZWVvm6Hcf/+Y+VUZigQU/o13nOTTwaHRvQk8o1DH2XqqiPOEoEusPDQHgx0EMpWtcBVQ+i9NBcfgsN5/f7NcJtk56ZRnizK5uSLeIsamiTFgJHpLwUEFmdaBWphX21eeobuPE6/NggILFI+RqhhD/VeBUHU0kOqQCZDD+GuRU2P+S+ze6r4Y53Ax5zf729li7d63LeovUgx2kTqgqvbKYArBkGeq6p0B4MfEiIN0/72M3ku9ITSFfO1czsVwv7tnWPGuKk2F4Abd+LtWlcQxVB4AAAAASUVORK5CYII=);
background-repeat: no-repeat;
background-position: center;
background-size: 10px;
width: 16px;
height: 16px;
vertical-align: middle;
}
input[type="checkbox"] {
webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
width: 16px;
height: 16px;
border: 1px solid #999;
background-color: #fff;
cursor: pointer;
}
input[type="checkbox"]:checked {
filter: invert(20%);
}
Выберите подходящий способ и адаптируйте его под ваши нужды. Удачи в стилизации галочки в checkbox!
Изменение цвета галочки в checkbox на CSS
Вариант 1: Использование псевдоэлемента ::before для создания галочки:
В CSS создаем новое правило для класса checkbox:
.checkbox::before {
content: «✔»;
color: red;
}
В данном примере, обычная галочка заменяется на символ ✔ (галочка), а цвет этого символа устанавливается в красный. Псевдоэлемент ::before создает и встраивает этот символ перед началом содержимого элемента checkbox.
Затем, просто добавляем класс checkbox к элементу checkbox в HTML:
Checkbox
Теперь, галочка в данном checkbox будет красного цвета.
Вариант 2: Использование CSS свойства background и background-image:
.checkbox {
background: url(‘path/to/custom-checkmark.png’) center center no-repeat;
background-size: contain;
}
Если у нас есть изображение с непонятной (текстовой) символикой галочки, мы можем его использовать вместо обычной. Подключаем это изображение к фону checkbox с помощью свойства background и устанавливаем его размеры (background-size) и расположение (background-position) по необходимости.
Теперь, галочка в данном checkbox будет заменена на изображение с нашей символикой и может быть любого цвета, представленного в изображении.
Примеры стилизации галочки в checkbox на CSS
1. Цвет фона галочки:
«`css
input[type=»checkbox»] {
background-color: #ff0000;
}
input[type=»checkbox»]:checked {
background-color: #00ff00;
}
2. Изменение цвета самой галочки:
«`css
input[type=»checkbox»] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 2px solid #000000;
width: 20px;
height: 20px;
outline: none;
}
input[type=»checkbox»]:checked {
background-color: #00ff00;
border-color: #00ff00;
}
input[type=»checkbox»]::before {
content: «»;
display: inline-block;
width: 20px;
height: 20px;
background-color: #ff0000;
border: 2px solid #000000;
border-radius: 4px;
}
input[type=»checkbox»]:checked::before {
background-color: #00ff00;
border-color: #00ff00;
}
3. Использование изображения для галочки:
«`css
input[type=»checkbox»] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: url(«check.png») no-repeat center center;
cursor: pointer;
outline: none;
}
input[type=»checkbox»]:checked {
background: url(«check-filled.png») no-repeat center center;
}
Это лишь некоторые примеры стилизации галочки в checkbox на CSS. Вы можете экспериментировать со свойствами и значениями, чтобы создать уникальный дизайн подходящий для вашего проекта.