Чесно кажучи, я «злегка» припізнилися з цією статтею, тому що то, що в ній викладено, можна було застосовувати на практиці вже досить давно. Але краще пізно, ніж ніколи, тим більше, що я впевнений, що серед моїх читачів знайдуться і ті, хто не користується цим способом при верстці з тих чи інших причин, як, власне, і я до недавнього часу.
Іншими словами - в сучасних браузерах чекбокси і радиокнопки будуть виглядати красиво, відповідно до задуманого дизайном, а в старих (це відноситься до Internet Explorer версії 8 і нижче) вони залишаться з оформленням «за замовчуванням», характерним для кожної конкретної операційної системи.
Фокус полягає в використанні псевдоселекторов: checked і: not. При цьому сам чекбокс або радіокнопка робляться невидимими, а їх емуляція здійснюється за допомогою псевдоселекторов: before та: after для тега
У HTML-коді це виглядає наступним чином:
При цьому важливо, щоб тег
Для радиокнопки буде по суті те ж саме:
Ось таким нескладним чином це і робиться. Завдяки даному способу, оформити чекбокси і радиокнопки за допомогою CSS можна так, як вам буде завгодно.