Красивые чекбоксы и радиокнопки на CSS3 без JavaScript

Я думаю, ничто не мешает для IE сделать JavaScript-хак.

Всё хорошо, но вместо лишнего SPAN ведь можно использовать ::before?

В IE работает. Проверьте.

А разве так не получится?

Вместо:
input[type=«checkbox»]:checked

написать:
input[checked=«checked»]

Нужно, чтобы можно было табуляцией фокус устанавливать.

Псевдоклассы, в частности используемый :checked, отлично работают в большинстве браузеров, за исключением Internet Explorer 9 (и ниже)

Уверены, что в IE9 не работает :checked?

Надо же как можно, оказывается:

input + label span

Опять управление с клавиатуры убито напрочь.

В Safari в iOS :checked работает, там не работает привязанный label.
Чтобы он заработал достаточно прописать ему пустой атрибут onclick.

<input type="checkbox" id="c1" name="cc" />
<label for="c1" onclick=""><span></span>Check Box 1</label>

В общем решение в посте так себе. Учитывая баги Webkit, которые обнаружены выше, я бы сделал примерно так (если опустить красивости):

<input type="checkbox" id="c1" name="cc">
<label for="c1">Check Box</label>

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  font-size: 14px; /* для webkit */
  cursor: pointer;
}

input[type="checkbox"] + label::before {
  display: inline-block;
  width: 19px;
  height: 19px;
  background: url('check_radio_sheet.png') left top no-repeat;
  content: "";
  vertical-align: middle;
}

input[type="checkbox"]:checked + label::before {
  background-position: -19px top;
}

Очень жаль, что по спецификации нельзя применять псевдоэлементы ::before и ::after к инпутам. Только Вебкит нарушает спецификацию.

Круто

Из комментариев узнал больше чем из статьи

Сейчас меня «накроет морем минусов» и всего такое, не важно, но сколько еще можно постить на хабру такую «воду»?

Хотите написать статью, изучите тему вдоль и поперек, то, что другие не знают, какие-то мелочи, детали, оставшиеся за сценой, что за унылое говно, ну, почему так, а?

Мне больше нравится вариант без использования label. Как-то так jsfiddle.net/9AFKW/8/

Статья хорошая, спасибо. Поставил Like

Но меня всегда печалила необходимость придумывать и указывать идентификатор для атрибута «for», конечно, если форма собирается шаблонизатором, то никаких проблем нету, но для production ваше решение тоже не подходит, хотя бы потому, что не работает управление с клавиатуры.
Я лично предпочту маленький js-файл (~700 байт) для отказа от атрибута «for» и для работающего управления с клавиатуры
Пример

А вообще, в CSS4 Selector API предусмотрен Reference Combinator и Parent Selector для таких случаев. Возможно, в будущем мы сможем написать:

label! /for/ input:checked {
    box-shadow: yellow 0 0 10px;  
}  

Правило применится к элементу <label>

Жду не дождусь статей «Красивые чекбоксы и радиокнопки на CSS4 без JavaScript» :)

Где-то я эту идею уже видел. Ах да, в моей статье.
habrahabr.ru/post/150760/

использую этот способ уже второй год, докопался до него через анализ родных чекбоксов в Google Chrome.

Очень круто, спасибо)

у этого способа есть еще один серьезный недостаток.

Нередко случается, что текстовый checkable-контент превышает по своему объему 1 строку (либо съезжает на вторую при увеличенном масштабе системных шрифтов, что не редкость у юзеров маков). В этом случае начало второй строки находится непосредственно под чекбоксом.



Мало того, при высоте битмэпа большей, чем line-height, прыгнет межстрочник.

Описывал подобный способ еще год назад вот здесь.