Checkbox html: приклади гарних кнопок на чистому CSS, створення “акордеона”, отримання даних з форм за допомогою PHP і jQuery

Варіанти застосування html input checkbox дуже великі, але найчастіше цей елемент використовується у формах передачі даних. Однак він вміє виконувати набагато більше “трюків”, ніж отримання значень форм. Зручно його використовувати для створення різних “акордеонів” на чистому CSS.

Простий Pure CSS “акордеон”

HTML:

<label for=”accordion1″>Пункт 1</label>
<input type=”checkbox” id=”accordion1″ >

<label for=”accordion2″>Пункт 2</label>
<input type=”checkbox” id=”accordion2″ >

<label for=”accordion3″>Пункт 3</label>
<input type=”checkbox” id=”accordion3″ >

CSS:

label[for^=”accordion”]:hover ~ label[for^=”accordion”]{
opacity: 0.8;
text-shadow: 1px 1px 2px currentColor;
}

У даному прикладі при наведенні курсору миші на label (“Пункт 1”) відбувається передача стилів на всі інші labels, які розташовані нижче (siblings, з англійської – рідні брати і сестри). Для передачі властивостей на siblings використовуємо знак “~”, щоб передавати стилі тільки на зазначені labels, а не на всі siblings на сторінці. Знак “^” позначає “починається з…”, у прикладі “for^=’accordion’ – ” (for) id input, яке починається зі слова “accordion”:

label[for^=”accordion”]

В результаті при наведенні курсору на label змінюється стиль нижніх labels.

Labels дуже корисні, тому що на екранах мобільних телефонів дуже важко клікати на маленькому квадратику checkbox html, вони розширюють зону, яка доступна користувачеві, щоб вибрати бажану відповідь. Більш того, завдяки label ви можете зовсім прибрати квадратики з екрану:

input[id^=”accordion”]{
position: absolute;
left: -9999px;
}

Також можна додати cursor: pointer, щоб відвідувачі сайту могли зрозуміти, що пункти “клікабельні”:

label[for^=”accordion”]:hover{
cursor:pointer;
}

В результаті при наведенні курсору на текст (наприклад, “Пункт 1”), курсор замість “стрілки” стане “рукою”. Щоб оживити “акордеон” ще більше, можна додати додаткові стилі CSS.

label[for^=”accordion”]:hover{
cursor:pointer;
color: red;
text-shadow: 1px 1px 2px currentColor;
}

“Трюки” CSS на цьому не закінчуються. Додамо прихований текст в наш “акордеон”.

<label for=”accordion1″>Пункт 1</label>
<input type=”checkbox” id=”accordion1″ >
<div id=”accordion-box-1″>Text 1.</div><br>

<label for=”accordion2″>Пункт 2</label>
<input type=”checkbox” id=”accordion2″ >
<div id=”accordion-box-2″>Text 2.</div><br>

<label for=”accordion3″>Пункт 3</label>
<input type=”checkbox” id=”accordion3″ >
<div id=”accordion-box-3″>Text 3.</div><br>

Стилі для прихованого тексту:

[id^=”accordion-box-“]{
overflow: hidden;
max-height:0;
}

Щоб при натисканні на label з’являвся текст, додамо max-height: 100 % стилі:

input[id^=”accordion”]:checked + [id^=”accordion-box-“]{
max-height: 100%;
}

Процес починається, коли користувач клікає” на label, checkbox html обраний (input: checked), далі передаємо за допомогою знака “+” (що означає “тільки перший sibling нижче”) властивість max-height: 100 % <div> з текстом.

При виборі відповідного пункту з’являється текст.

HTML:

<label for=”accordion1″>Пункт 1</label>
<input type=”checkbox” id=”accordion1″ >
<div id=”accordion-box-1″>Text 1.</div><br>

<label for=”accordion2″>Пункт 2</label>
<input type=”checkbox” id=”accordion2″ >
<div id=”accordion-box-2″>Text 2.</div><br>

<label for=”accordion3″>Пункт 3</label>
<input type=”checkbox” id=”accordion3″ >
<div id=”accordion-box-3″>Text 3.</div><br>

CSS:

label[for^=”accordion”]{
font-size: 20px;
}
label[for^=”accordion”]:hover{
cursor:pointer;
color: red;
text-shadow: 1px 1px 2px currentColor;
}
label[for^=”accordion”]:hover ~ label[for^=”accordion”]{
opacity: 0.8;
text-shadow: 1px 1px 2px currentColor;
}
input[id^=”accordion”]:checked + [id^=”accordion-box-“]{
max-height: 100%;
margin: 10px;
}
input[id^=”accordion”]{
position: absolute;
left: -9999px;
}
[id^=”accordion-box-“]{
overflow: hidden;
max-height:0;
}