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

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

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

Комментарии (95)
  1. 1

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

  2. 2
    Dzirt D'Ourden

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

  3. 3
    Сергей

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

  4. 4
    Aziz

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

  5. 5
    qashqir

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

  6. 6
    Иван

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

  7. 8
    Максим

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

  8. 9
    Serg

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

  9. 10
    Алексей

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

  10. 11
    Tim

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

    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. 12
    Олег

    День добрый!

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

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

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

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