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

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

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

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

  1. С тенями вообще смотрится супер круто! Респектую

  2. Потрясающее решение!

  3. Просто лучшее, что я искал, вот правда. Огромное спасибо за два таких примера. То что нужно

  4. Спасибо большое автору!
    Сильно помог)

  5. Хотелось бы продолжения подобной серии статей, к примеру, по input type range с решениями на js для отображения value

  6. Как у чекбокса изменить расстояние смещения маркера?

  7. Огромное спасибо за эти примеры, всё подключил — всё работает с первого раза !!! Как до делаю проект надо будет ссылку на Ваш сайт разместить … !!!

  8. Лучшее решение и объяснение что нашел в ru и com! Спасибо. Теперь стал понимать как это устроено, вместо того, чтобы просто скопипастить.

  9. Спасибо, очень качественно

  10. Я для себя такой вариант сделал использовав данную статью:

    
    label.checkbox input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    }
    .y, .n {
    position: absolute;
    cursor: pointer;
    width: 25px;
    padding: 3px;
    border-radius: 3px;
    text-align: center;
    transition-duration: .4s;
    }
    .y{
    opacity: 0;
    color: #006A35;
    background: #95DF8E;
    border: 1px solid #006A35;
    }	
    .n{
    opacity: 1;
    color: #9A0003;
    background: #FF8D8F;
    border: 1px solid #9A0003;
    }	
    .checkbox input:checked ~ .y {
    opacity: 1;
    }
    .checkbox input:checked ~ .n {
    opacity: 0;
    }
    
    
    <label class="checkbox">
      <input type="checkbox" />
      <div class="y">Да</div>
      <div class="n">Нет</div>
    </label>
    
  11. День добрый!

    Столкнулся со следующей проблемой… В RSForm конструкция вывода и чекбоксов и радиобоксов следующая:

    <label class="checkbox">
      <input type="checkbox" />
      Я переключаю чекбокс
    </label>

    Как в таком случае их стилизовать? Помогите, пожалуйста!

  12. Благорадю за красивое и простое решение!
    Скажите, а можно сделать так, чтобы текст был перед самим переключателем? Т.к. так, как это выглядит на современных смартфонах.

  13. Я делал без ::after и ::before, все работает!

  14. Просто лучшее, что я искал, вот правда. Огромное спасибо за два таких примера. То что нужно

  15. Спасибо. Выручили.Все получилось.

  16. Шикарное решение) Автор молодец)

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