Стилизация чекбоксов и радиокнопок на чистом CSS с совместимостью для старых браузеров

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

Честно говоря, я «слегка» припозднился с данной статьей, т.к. то, что в ней изложено, можно было применять на практике уже довольно давно. Но лучше поздно, чем никогда, тем более, что я уверен, что среди моих читателей найдутся и те, кто не пользуется этим ...

Комментарии (66)
  1. 1
    Давид Мзареулян

    Второй недостаток можно исправить, если не скрывать исходный чекбокс через display: none, а оставлять его видимым, но прятать каким-либо способом. Либо вынося за границы экрана, либо при помощи opacity: 0; pointer-events: none;. Тогда фокус можно отображать с помощью .checkbox:focus + …

  2. 5

    Да, давно видел этот способ) но к сожалению, все хотят, чтобы было одинаково во всех браузерах.

  3. 6
    Артём

    Автору благодарность за статью. Помогла.

  4. 7

    Попробовал решение. Выглядит очень эффектно. НО! Но у меня не отправляется значение элемента в форме. Т.е. внешне чекбокс получает состояние checked, а форма его не отправляет.

  5. 10
    guests

    Спасибо, пригодилось

  6. 11
    Vasya Pupkin

    А еще для disabled элементов нужны стили
    .checkbox:disabled + label:before {
    background: #eee;
    }
    .radio:disabled + label:before {
    background: #eee;
    }

  7. 12
    Vitalij

    Возможно ли, как нибудь отделить input от label ? У меня в проекте чекбокс и текст находятся в разных местах кода.

  8. 15
    JuJu

    Если убрать id, то не работает..
    Что делать, когда много разных для формы

  9. 17
    Захар

    А CSS для radio не выложили в статье :)

  10. 20

    Спасибо за красочное оформление radio давно искал такие стили.

  11. 21
    Dmitry

    Спасибо, пригодилось!

  12. 22

    Дима, привет!

    Что такое :not(checked)?

    И :before и :after это вроде псевдоэлементы а не псевдоселекторы :)

    • 23

      И тег tt вырезается при комментировании вот «выделил»

    • 24

      Привет.

      Что такое :not(checked)?

      Это для IE8 и ниже, который не знает такую конструкцию, чтобы в нем не происходила стилизация.

      И :before и :after это вроде псевдоэлементы а не псевдоселекторы :)

      И так, и так говорят, еще и псевдоклассами называют.

      И тег tt вырезается при комментировании вот «выделил»

      Странно, когда я вставляю, все путем. Спасибо, что сообщил, надо разобраться.

  13. 25
    Sergey

    Спасибо за статью — классная. Слушай как сделать при наведении ховер на чекбокс(уже стилизованный), что бы к примеру бордюр подсвечивался?

  14. 32
    Илья

    В IE6-8 не работает !

  15. 34
    Илона

    Спасибо огромное! Очень пригодилось :)

  16. 35
    Юля

    Помогите плс, не знаю что уже и делать. В опере чекбокс вылез за границу label, и получилось что сам чекбокс в правом верхнем углу, а лейбл ниже него. В остальных браузерах все отображается корректно. Спасибо за статью.

  17. 37
    Дмитрий

    Спасибо Большое! Выглядит очень круто!
    Подскажите пожалуйста новичку как сделать чтобы label и скрытый input публиковались на одной позиции?
    Или как для label задать точное место положение?
    А то стандартный radio стоит где нужно но скрыт, а новый и красивый прилип с лева и нечего с ним сделать не могу..)
    Спасибо) и не судите строго

  18. 38
    Роман

    Отличная реализация!
    Дмитрий, скажите, а возможно ли будет оформить в виде слайдера не только чекбоксы, но и радиокнопки?
    Это пригодится в случае, когда управление выбором реализовано двумя радиокнопками, типа «Включить оповещение по e-mail? Да — Нет», а не чекбоксом. И тогда слайдер как раз в тему был бы.

  19. 40
    Роман

    Но это будет 2 слайдера вместо одного… Получается нужно как-то объединить 2 в 1.

Ваш комментарий