CSS Checkbox Generator

Šta je ovaj alat?

Подразумевани чекбоксови прегледача изгледају различито у сваком прегледачу и тешко их је директно рестилизовати, пошто њихов уграђени изглед исцртава оперативни систем, а не обичан CSS. Стандардно решење је да се изворни чекбокс визуелно сакрије, а уместо њега стилизује суседни елемент, вођен :checked стањем чекбокса — поље остаје потпуно функционално и приступачно, мења се само његов изглед.

Овај алат гради тај образац за три уобичајена стила чекбокса: заобљени квадрат са анимираном кваком, клизни прекидач у iOS стилу и попуњени круг (сличан радио дугмету). Кликните на чекбокс у прегледу да видите означено стање, подесите величину и акцентну боју, а затим копирајте CSS код.

Извор: Selectors Level 4, W3C — спецификација која дефинише :checked псеудо-класу на којој се заснива ова техника.

Zašto ga koristiti?

• Живи, кликабилни преглед — укључите и искључите чекбокс да видите тачно како изгледају означено и неозначено стање.
• Три различита, често коришћена стила у једном алату: квадрат са кваком, прекидач и попуњени круг.
• Основни елемент остаје прави <input type="checkbox">, тако да навигација тастатуром, слање образаца и читачи екрана и даље нормално раде.
• Подесива величина и акцентна боја, генерисане директно као вредности у CSS коду, уместо да остану као променљиве за попуњавање.
• Није потребан иконички фонт, SVG фајл нити слика — квака и клизач се исцртавају помоћу обичних CSS оквира и псеудо-елемената.
• Бесплатно, ради у вашем прегледачу, без регистрације.

Kako se koristi

1. Изаберите стил: заобљена квака, прекидач или попуњени круг.
2. Превуците клизач величине да увећате или смањите чекбокс.
3. Изаберите акцентну боју — она постаје боја позадине и ивице у означеном стању.
4. Кликните на чекбокс у панелу за преглед да потврдите да означено и неозначено стање изгледају исправно.
5. Копирајте генерисани CSS код у своју стилску датотеку и користите га на било ком <input type="checkbox"> обмотаном на исти начин као ознака у прегледу.

Primer

Unos

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

Rezultat

.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

Često postavljana pitanja