Короткий Урок: Створення чекбоксів і радіокнопок з CSS3

Ви коли небудь замислювалися, як стилізувати чекбокси і радиокнопки, при цьому не використовуючи JavaScript? Ви це можете завдяки CSS3 ! Ось що ми збираємося зробити в цьому уроці:

Якщо ви шукаєте графіку для елементів інтерфейсу, погляньте на UI набори доступні на Envato Elements. В іншому випадку, прихопіть чашечку кави і давайте починати наш урок!

1. Розуміння Процесу

Рекомендоване читання: 30 CSS селекторів Які Ви Повинні Пам'ятати

Для тих хто відчуває себе впевнено у використанні CSS і кому потрібен тільки легкий поштовх у правильному напрямку, ось найважливіший CSS рядок з усього уроку:

input[type="checkbox"]:checked + label {

}

Тепер для тих, хто відчуває, що їм цього мало, і треба побільше інформації, не боїмося, читаємо далі!

Добре, давайте повернемося до нашої теми. Так що ж ми будемо робити? Завдяки відмінному псевдоселектору CSS3 - :checked, ми можемо вказати на елемент в залежності від його статусу відзначений - не зазначено. Потім, ми можемо використовувати + суміжний селектор з CSS2.1, що б вказати на елемент наступний за чекбоксів або радіокнопкою, ніж в нашому випадку є label.

2. Записуємо Наш HTML-код

Тепер ми почнемо створювати наші HTML і СSS файли (хоча може ви віддаєте перевагу іншому стиль) і приступаємо до роботи. Я сподіваюся, ви знаєте як це робити, так, що ми не будемо зупинятися на цьому докладно.

Я покажу вам техніку тільки для випадку чекбокса, щоб направити вас на "шлях істинний", а, для випадку радиокнопки, процес буде такий же, і крім того, в исходниках все є.

Добре, давайте вже почнемо, ми можемо вже? Ми почнемо з створення нашого чекбокса, за яким слідує тег label.

<input type="checkbox" />
<label>Styled Check Box</label>

Тепер, на випадок, якщо ви мало знаєте про тег <label> , ви повинні зв'язати input і label, для того, що б ви могли взаємодіяти з чекбоксів через label. Це робиться за рахунок використання, for="" і ID для чекбокса.

<input type="checkbox" id="c1" name="cc" />
<label for="c1">Check Box 1</label>

Я також додам <span> в label, що є моїм індивідуальним перевагою, але вам все стане зрозуміліше на 3 кроці.

3. А для чого все це: CSS

Ось тут у нас починається найцікавіше. Перше, що ми робимо, що є основою для цього уроку, ми приховуємо стандартний чекбокс.

input[type="checkbox"] {
    display:none;
}

Тепер коли ми це зробили, ми можемо створити стиль для label, а точніше для span, який знаходиться у нас в label. Я роблю це, що б у мене було більше контролю над становищем чекбокса. Без цього вам би довелося звертатися до фонового зображення в label, і довелося б повозитися з його позиціонуванням.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

Добре, тепер давайте, я вам поясню швиденько, що ми тут робимо. В першу чергу, зверніть увагу на фонове зображення. У мене для нього є маленький спрайт (об'єднаний набір картинок), тому все, що я повинен зробити - прописати положення для фонового зображення в span. Сам span задає точну ширину і висоту для кожного елемента в спрайт, таким чином, стає легше ставити кожен стан.

Далі решта CSS, відповідно за моїм стилем. Це більше для краси і відповідає моєму смаку або цього дизайну.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

4. Запускаємо в Роботу

Залишилося трохи роботи, давайте закінчимо з цим. Все що вам залишилося, це прописати стан для елемента input, на випадок імзененія стану на - "відзначений" (checked), і зокрема для hover. Це дуже просто, погляньте!

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Зауважте, оскільки я використовував спрайт, все що мені потрібно зробити, це змінити положення фонового зображення. Так само зауважте, що, все що мені потрібно було, що б змінити відображення вмісту span в label, коли ви "відзначаєте" чекбокс / радіокнопку, це ісполользовать псевдоселектор CSS3 - :checked.

Невелике Зауваження по підтримки браузера

Псевдоселектори підтримуються майже у всіх браузерах, але бувають деякі виключення, при цьому резервні відображення - цілком пристойні:

Питання з підтримкою :checked в старих браузерах використовуваних в мобільних додатках не зовсім ясний. Наприклад, Mobile Safari для iOS6 його не підтримує.

Висновок

Отже, ми все зробили, вірно? Давайте звіримося. Спочатку код для HTML:

<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

У вас все так же? Не забудьте додати <span>! Коли ви будете експериментувати з цим самостійно, я вкрай рекомендую знайти вам новий або інший спосіб, зробити цю частину. Я із задоволенням подивлюся на ваші більш ефективні варіанти. Тепер звіримо CSS:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Все на місці? Відмінно. Пам'ятайте, що стилізація, в даному випадку, відповідає створеним мною демо файлів. Я пропоную вам написати ваш власний стиль, і поекспериментувати з розміщенням і відображенням елементів.

На закінчення, найважливіше, що ви повинні винести з цього уроку - це мой перший рядок CSS, який я привів на самому початку:

input[type="checkbox"]:checked + label {

}

За допомогою цього, можна створити цілий набір різних речей. Можливості :checked йдуть далі, ніж використання його для чекбоксів і радіокнопок в формах, але я пропоную вам поекспериментувати на цю тему самостійно. Ось вам варіанти для експериментів:

• Додати 2x спрайт для РЕТІНА екранів
• Використовувати SVG замість растра

Я сподіваюся вам сподобалася ця коротка стаття, і ще я сподіваюся, що ви розвинете або поліпшите, то, що ви тут дізналися!