CSS Checkbox Generator

Какво представлява този инструмент?

Стандартните квадратчета за отметка изглеждат различно във всеки браузър и трудно се стилизират директно, тъй като вграденият им външен вид се изчертава от операционната система, а не от чист CSS. Обичайният подход е визуално да се скрие нативното квадратче и вместо него да се стилизира съседен елемент, управляван от състоянието :checked на квадратчето — полето остава напълно функционално и достъпно, променя се само външният му вид.

Този инструмент изгражда точно този модел за три често използвани стила: заоблено квадратче с анимирана отметка, плъзгащ се превключвател в стил на iOS и запълнен кръг (наподобяващ радио бутон). Кликнете върху квадратчето в прегледа, за да видите състоянието „отметнато“, регулирайте размера и акцентния цвят, след което копирайте CSS кода.

Източник: Selectors Level 4, W3C — спецификацията, дефинираща псевдокласа :checked, на който се основава тази техника.

Защо да го използвате?

• Жив, кликаем преглед — превключете квадратчето, за да видите точно как изглеждат отметнатото и неотметнатото състояние.
• Три различни, широко използвани стила в един инструмент: квадратче с отметка, превключвател и запълнен кръг.
• Основният елемент остава истински <input type="checkbox">, така че навигацията с клавиатура, изпращането на формуляри и екранните четци продължават да работят нормално.
• Регулируем размер и акцентен цвят, генерирани директно като стойности в CSS кода, вместо да се оставят като променливи за попълване.
• Не са нужни икон шрифт, SVG файл или изображение — отметката и плъзгачът се изчертават с обикновени CSS рамки и псевдоелементи.
• Безплатен, работи във вашия браузър, без регистрация.

Как да го използвате

1. Изберете стил: заоблена отметка, превключвател или запълнен кръг.
2. Плъзнете плъзгача за размер, за да увеличите или намалите квадратчето.
3. Изберете акцентен цвят — той става цветът на фона и рамката в отметнато състояние.
4. Кликнете върху квадратчето в панела за преглед, за да потвърдите, че отметнатото и неотметнатото състояние изглеждат правилно.
5. Копирайте генерирания CSS код в своя стилов лист и го използвайте за всеки <input type="checkbox">, обвит по същия начин като маркиращата разметка в прегледа.

Пример

Вход

Style: rounded checkmark · Size: 24px · Color: orange

Резултат

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

Полето за квадратчето е визуално скрито; видимото квадратче е съседен елемент <span>, стилизиран според състоянието :checked на полето, с малка завъртяна рамка, изчертана като отметка при избиране.

Защо да скриете нативното квадратче, вместо да го премахнете

Изкушаващо е да се пропусне истинският <input> и да се изгради квадратче изцяло от стилизиран <div> с обработчик на кликове, но така безплатно се губят поддръжката на клавиатура, изпращането на формуляри и семантиката за екранни четци. Моделът, който този инструмент генерира, запазва истинското поле за квадратче в разметката — само визуално скрито с opacity: 0 и преместено — така че браузърът продължава да го третира като истинско квадратче във всяко отношение, докато съседен елемент се грижи за видимия стил.

Трите стила накратко

• Заоблена отметка: познат модел „квадратче с отметка“, най-често използван за полета във формуляри, отметки за съгласие и списъци с множествен избор.
• Превключвател: възприема се като моментна настройка вкл./изкл., а не като поле от формуляр — най-подходящ за екрани с предпочитания и настройки, а не за списъци с квадратчета.
• Запълнен кръг: минималистичен вид, наподобяващ радио бутон, полезен когато квадратно поле би изглеждало визуално тежко на фона на заоблени UI елементи наблизо.

Съгласуване с останалата част от вашия интерфейс

Генерираният акцентен цвят влияе само на отметнатото състояние — изберете цвета на вашата марка или бутони, за да изглежда квадратчето последователно с останалата част от страницата. Съчетайте го със същия border-radius, използван другаде в интерфейса, за по-цялостен вид.

→ Border Radius Generator

Често задавани въпроси