Главная CSS-верстка

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

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

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

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

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

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

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

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

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

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

  6. А еще для 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.

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