7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS

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

Read Time: 5 mins

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Our sprite sheetOur sprite sheetOur sprite sheet
Наш спрайт лист

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

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

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

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

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

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

Can I use data for pseudo selectorsCan I use data for pseudo selectorsCan I use data for pseudo selectors
Can I Use - можливість використання псевдоселекторов.
IE9 on Windows 7IE9 on Windows 7IE9 on Windows 7
Резервний варіант: IE9 на Windows 7

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

Висновок

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

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

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

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

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

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

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.