Оформлення кнопок на чистому CSS
Щоб оформити кнопки у відповідності з дизайном сайту, будемо використовувати тільки CSS. Сховаємо оригінальний квадратик з допомогою властивостей z-index і opacity, в даному випадку квадратики не зрушуються з екрану, а просто стають прозорими (opacity:0).
CSS:
position: absolute;
z-index: -1;
opacity: 0;
margin: 10px 0 0 20px;
На тому ж самому місці відображаємо кнопки з власним дизайном.
Тег input може знаходиться перед тегом label, тоді використаємо перший приклад стилізації кнопок:
.my-class {
position: absolute;
z-index: -1;
opacity: 0;
margin: 10px 0 0 20px;
}
.my-class + label {
position: relative;
padding: 0 0 0 60px;
cursor: pointer;
}
.my-class + label:before {
content: “;
position: absolute;
top: -4px;
left: 0;
width: 50px;
height: 26px;
border-radius: 13px;
background: #CDD1DA;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
transition: 1.2 s;
}
.my-class + label:after {
content: “;
position: absolute;
top: -2px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 10px;
background: #FFF;
box-shadow: 2px 0 5px rgba(0,0,0,.3);
transition: .2s;
}
.my-class:checked + label:before {
background: #87CEFA;
-webkit-animation: blackblur 2s 0.15 s 1 alternate;
}
.my-class:checked + label:after {
left: 26px;
}
.my-class:focus + label:before {
box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(206,250,135,.7);
}
@-webkit-keyframes blackblur {
from { box-shadow: 0 0 72px black; color: transparent; }
to { box-shadow: 0; color: black; }
}
Якщо input – всередині тега label, тоді текст чекбокса поміщаємо в div з класом “text”. Стилі передаємо з input:checked на div з класом “text” у другому прикладі:
.label input{
position: absolute;
z-index: -1;
opacity: 0;
margin: 10px 0 0 20px;
}
.text {
position: relative;
padding: 0 0 0 60px;
cursor: pointer;
}
.text:before {
content: “;
position: absolute;
top: -4px;
left: 0;
width: 50px;
height: 26px;
border-radius: 13px;
background: #CDD1DA;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
transition: .2s;
}
.text:after {
content: “;
position: absolute;
top: -2px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 10px;
background: #FFF;
box-shadow: 2px 0 5px rgba(0,0,0,.3);
transition: .2s;
}
.label input:checked + .text:before {
background: #87CEFA;
-webkit-animation: blackblur 2s 0.15 s 1 alternate;
}
.label input:checked + .text:after {
left: 26px;
}
.label input:focus + .text:before {
box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(206,250,135,.7);
}
@-webkit-keyframes blackblur {
from { box-shadow: 0 0 72px black; color: transparent; }
to { box-shadow: 0; color: black; }
}
HTML:
<p>Необхідні навички:</p>
<form action=”” method=”POST”>
<label class=”label”>
<input type=”checkbox” name=”ALL” id=”checkAll” value=”ALL” class=”my-class” >
<div class=”text”>
Зазначити всі
</div>
</label>
<label class=”label”>
<input type=”checkbox” name=”HTML_name” id=”HTML_label” value=”HTML” class=”my-class” >
<div class=”text”>
HTML
</div>
</label>
<label class=”label”>
<input type=”checkbox” name=”CSS_name” id=”CSS_label” value=”CSS” class=”my-class” >
<div class=”text”>
CSS
</div>
</label>
<label class=”label”>
<input type=”checkbox” name=”javascript_name” id=”javascript_label” value=”Javascript” class=”my-class” >
<div class=”text”>
Javascript</div>
</label>
<label class=”label”>
<input type=”checkbox” name=”jQuery_name” id=”jQuery_label” value=”jQuery” class=”my-class” >
<div class=”text”>
jQuery
</div>
</label>
<label class=”label”>
<input type=”checkbox” name=”PHP_name” id=”PHP_label” value=”PHP” class=”my-class” >
<div class=”text”>
PHP
</div>
</label>
<label class=”label”>
<input type=”checkbox” name=”MySQL_name” id=”MySQL_label” value=”MySQL” class=”my-class” >
<div class=”text”>
MySQL
</div>
</label>
<label class=”label”>
<input type=”checkbox” name=”ajax_name” id=”ajax_label” value=”Ajax” class=”my-class” >
<div class=”text”>
Ajax
</div>
</label>
<div id=”log”></div>
<input type=”submit” id =”submitButton” disabled value=”Submit”>
</form> 
Таким чином, в залежності від ситуації, завжди можна вибрати підходящий варіант розташування input і label. Якщо з якоїсь причини не підходить варіант, коли input розташований перед label, можна розташувати input всередину тега label.
Стилізувати checkbox html можна також і за допомогою скриптів (javascript, jQuery), сучасні браузери чудово з ними справляються. Але якщо користувач заходить на сайт зі старого браузера, то перевагу варто віддати CSS.
Також потрібно врахувати, що на різних операційних системах стилі “чекбоксов” будуть виглядати по-різному. Якщо Google Chrome намагається згладжувати ці відмінності, то на інших браузерах дизайн кнопок може сильно відрізнятися.
