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

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

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью для старых браузеров (т.е. не в ущерб юзабилити), которые не поддерживают современные ...

Комментарии (98)

  1. Давид Мзареулян
    5 лет 3 месяца назад

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

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

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

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

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

  6. Vasya Pupkin
    5 лет назад

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

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

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

    • Добавляйте уникальные id. Либо можно сделать так:

      
      <label>
      	<input type="checkbox" class="checkbox" />
      	<span>Чекбокс переключается кликом по тексту ...</span>
      </label>
      
      
      .checkbox:checked + span:before {
      	...
      }
      

      Т.е. оформление переносится с label на span.

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

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

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

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

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

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

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

    • Привет.

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

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

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

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

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

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

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

  14. Ох спасибо!!!

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

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

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

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

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

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

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