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

[Quiz]

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

[leshaogonkov]

Наверное лучше в принципе проверять поддержку подобных селекторов, а не «ie»/«не ie»
stackoverflow.com/questions/8531940/how-to-detect-if-browser-support-specified-css-pseudo-class

[Sadykh]

Осталось ещё для input file и select. А что там с кроссбраузерностью и с какой версии браузеров работает?

[Fesor]

С file все проще: jsfiddle.net/tsLyW/ и будет работать во всех браузерах. Есть еще мысль заменить span на :before, но в любом случае понадобится контейнер.

А с select вариантов стилизации не особо много. Меня лично бесят кастомные селект-боксы. В большинстве своем они выглядят куда более отвратительно нежели нативные.

[Fesor]

Только вот JS уже используется. Но да, так проще.

[Dimoniusis]

Я с селектами поступаю так же, как и с file — при opacity:0; сам селект скрывается, а вот список имеет 100% видимость. Правда, чтобы в стилизованном спане показывать выбранный пункт, приходится все-таки использовать скрипт, но там буквально пара строк.

[porcelanosa]

В IE 9 у меня только по двойному клику окно открывается

[asanov]

Нет поля, где бы отображалось название выбранного файла. Непонятно, выбран уже файл (и какой) или нет.

[ImKremen]

В лисе не вся область кликабельна.

[Methos]

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

[weiss]

А как скроете оригинальный контрол?

[weiss]

Как вы будете ловить нажатие на контрол? Получится, что клик по тексту label будет работать, а по самой картинке (т. е. псевдоэлементу) — нет.

[weiss]

Можете показать пример? У меня не работает нажатие на псевдо-элемент, когда вешаю его на label.

[weiss]

А теперь уберите оттуда:

input[type="checkbox"] + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
    font-size:14px;
}

и удивитесь))

[weiss]

Это из-за font-size, проверил в хроме и сафари на макоси — не работает, если убрать это свойство. Нет возможности сейчас в других браузерах посмотреть, интересно, как поведут себя не-webkit.

[iXCray]

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

[Quiz]

Да, в 9 действительно работает.

[alexber220]

сделал деградацию добавлением body:not(#foo) вначало так

body:not(#foo) input[type=«checkbox»] {
display:none;
}

body:not(#foo) input[type=«checkbox»] + label span {
…

[ferasinka]

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

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

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

[Connor]

Нет, т.к. при изменении этого параметра, сам аттрибут не измениться, тут в css нужен именно псевдокласс.

[radist2s]

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

[Proxmiff]

А что мешает подложить рядышком [e-mail] для ретины?

[Proxmiff]

А что, нативные чекбоксы как-то себя ведут при масштабировании в десктопном браузере? Проверил в вебкитах, они не масштабируются.

[Connor]

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

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

[zencd]

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

input + label span

[datacompboy]

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

[KoLar]

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

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

[weiss]

В общем решение в посте так себе. Учитывая баги 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;
}

[weiss]

Ну, в продакшн я бы вообще так не делал)
Имел ввиду конкретно этот пост.

[Finom]

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

[kuchumovn]

Круто

[btd]

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

[myadzel]

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

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

[Fesor]

В ключе данной статьи «изучить вдоль и поперек» это слишком громко. Способов это сделать на самом деле масса. Не стоит быть настолько уж суровым, бывают статьи и похуже, и скушнее, и водянистее… Причем в разы.

Хотя я бы не отказался от статейки по обзору различных способов стилизации форм.

[myadzel]

Написать на изображении «No JavaScript» это совсем не комильфо. Если уж что-то и делать, то с обратной совместимостью и с учетом graceful degradation.

Есть такие (глубоко нативные, привычные и необходимые) вещи, которые никто не отменял, например Tab или Shift + Tab. Это должно поддерживаться. Ровно, как и выбрать чекбокс тем же «пробелом».

Фокуса на элементе не видно, без мыши — ноль копеек цена такой форме с такими элементами. Да что это я в самом деле…

[myadzel]

Я о том и пишу, смысл это статьи какой?

Ее нужно было назвать как,
«Охуенные чекбоксы, которые как-бы не везде работают и не совсем правильно работают. Но охуенные.».

[ImKremen]

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

[ImKremen]

Можно, но я предпочитаю такие вещи в цельный блок объединять.

[termi]

Статья хорошая, спасибо. Поставил 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» :)

[termi]

Почему же огорчать? CSS такой же живой стандарт, как и HTML. CSS4 всего лишь сокращение для CSS Selector API level 4 и он таки будет, просто под именем CSS. Но я вас уверяю, когда браузеры начнут внедрять CSS Selector API level 4, они в своих пресс-релизах будут использовать именно термин CSS4, как было с HTML5.

[ImKremen]

Смотрите мой комментарий выше.
Добавил ещё выделение при фокусе jsfiddle.net/9AFKW/30/

[termi]

Это круто, но, для меня лично, семантически некрасиво. Да и добавьте теперь сюда текст для инпута, да чтобы он ещё был связан с инпутом: клик по тексту -> клик по инпуту

Что уж говорить, я даже twitter bootstrap отредактировал, чтобы он поддерживал <input> вложенный в <label>

[ImKremen]

Добавил, все работает jsfiddle.net/9AFKW/33/

[kefirfromperm]

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

[grokru]

Сила визуализации налицо.

[kefirfromperm]

Да, пожалуй, нужно больше картинок.

[Matrosked]

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

[Matrosked]

а, знаете, вру — в способе моём Google Chrome в сам label подставляется непосрдственно битмэп, через псевдокласс :before — таким образом, те же яйца, только без спана.

[cubesun]

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

[Matrosked]

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

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



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

[PaulMaly]

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