Короткий Урок: Створення чекбоксів і радіокнопок з CSS3
Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)
Ви коли небудь замислювалися, як стилізувати чекбокси і радиокнопки, при цьому не використовуючи 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 замість растра
Я сподіваюся вам сподобалася ця коротка стаття, і ще я сподіваюся, що ви розвинете або поліпшите, то, що ви тут дізналися!