Красивые чекбоксы и радиокнопки на 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]

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