How TO — Custom Checkbox
Learn how to create custom checkboxes and radio buttons with CSS.
Custom checkbox:
Custom radio button:
How To Create a Custom Checkbox
Step 1) Add HTML:
Example
Step 2) Add CSS:
Example
/* Customize the label (the container) */
.container display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>
/* Hide the browser’s default checkbox */
.container input position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
>
/* Create a custom checkbox */
.checkmark position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
>
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark background-color: #ccc;
>
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark background-color: #2196F3;
>
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after content: «»;
position: absolute;
display: none;
>
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after display: block;
>
/* Style the checkmark/indicator */
.container .checkmark:after left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
>
How To Create a Custom Radio Button
Example
/* Customize the label (the container) */
.container display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>
/* Hide the browser’s default radio button */
.container input position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
>
/* Create a custom radio button */
.checkmark position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
>
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark background-color: #ccc;
>
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark background-color: #2196F3;
>
/* Create the indicator (the dot/circle — hidden when not checked) */
.checkmark:after content: «»;
position: absolute;
display: none;
>
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after display: block;
>
/* Style the indicator (dot/circle) */
.container .checkmark:after top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
>
Стилизация флажков и переключателей с использованием CSS3
При создании CSS стилей для HTML форм, разработчики часто сталкиваются с невозможностью непосредственно менять внешний вид элементов флажков (checkboxes) и переключателей (radio buttons). Рассмотрим как можно обойти это ограничение при помощи инструментария CSS3 и без использования какого-либо кода JavaScript.
Итак, для начала добавим несколько обычных флажков и переключателей на форму:
/* Мои флажки */ /* Мои переключатели */ 
Перенесем стандартное отображение элементов за область видимости и добавим отступы к соседствующим меткам:
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 определения можно загрузить здесь.