Comments 89
Я думаю, ничто не мешает для IE сделать JavaScript-хак.
Наверное лучше в принципе проверять поддержку подобных селекторов, а не «ie»/«не ie»
stackoverflow.com/questions/8531940/how-to-detect-if-browser-support-specified-css-pseudo-class
stackoverflow.com/questions/8531940/how-to-detect-if-browser-support-specified-css-pseudo-class
Осталось ещё для input file и select. А что там с кроссбраузерностью и с какой версии браузеров работает?
С file все проще: jsfiddle.net/tsLyW/ и будет работать во всех браузерах. Есть еще мысль заменить span на :before, но в любом случае понадобится контейнер.
А с select вариантов стилизации не особо много. Меня лично бесят кастомные селект-боксы. В большинстве своем они выглядят куда более отвратительно нежели нативные.
А с select вариантов стилизации не особо много. Меня лично бесят кастомные селект-боксы. В большинстве своем они выглядят куда более отвратительно нежели нативные.
Я с селектами поступаю так же, как и с file — при opacity:0; сам селект скрывается, а вот список имеет 100% видимость. Правда, чтобы в стилизованном спане показывать выбранный пункт, приходится все-таки использовать скрипт, но там буквально пара строк.
В IE 9 у меня только по двойному клику окно открывается
Нет поля, где бы отображалось название выбранного файла. Непонятно, выбран уже файл (и какой) или нет.
В лисе не вся область кликабельна.
Всё хорошо, но вместо лишнего SPAN ведь можно использовать ::before?
А как скроете оригинальный контрол?
Как вы будете ловить нажатие на контрол? Получится, что клик по тексту label будет работать, а по самой картинке (т. е. псевдоэлементу) — нет.
Можете показать пример? У меня не работает нажатие на псевдо-элемент, когда вешаю его на label.
В IE работает. Проверьте.
А разве так не получится?
Вместо:
input[type=«checkbox»]:checked
написать:
input[checked=«checked»]
Вместо:
input[type=«checkbox»]:checked
написать:
input[checked=«checked»]
Нужно, чтобы можно было табуляцией фокус устанавливать.
Псевдоклассы, в частности используемый :checked, отлично работают в большинстве браузеров, за исключением Internet Explorer 9 (и ниже)
Уверены, что в IE9 не работает :checked?
Надо же как можно, оказывается:
input + label span
Опять управление с клавиатуры убито напрочь.
В Safari в iOS :checked работает, там не работает привязанный label.
Чтобы он заработал достаточно прописать ему пустой атрибут onclick.
Чтобы он заработал достаточно прописать ему пустой атрибут 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 к инпутам. Только Вебкит нарушает спецификацию.
Круто
Из комментариев узнал больше чем из статьи
Сейчас меня «накроет морем минусов» и всего такое, не важно, но сколько еще можно постить на хабру такую «воду»?
Хотите написать статью, изучите тему вдоль и поперек, то, что другие не знают, какие-то мелочи, детали, оставшиеся за сценой, что за унылое говно, ну, почему так, а?
Хотите написать статью, изучите тему вдоль и поперек, то, что другие не знают, какие-то мелочи, детали, оставшиеся за сценой, что за унылое говно, ну, почему так, а?
В ключе данной статьи «изучить вдоль и поперек» это слишком громко. Способов это сделать на самом деле масса. Не стоит быть настолько уж суровым, бывают статьи и похуже, и скушнее, и водянистее… Причем в разы.
Хотя я бы не отказался от статейки по обзору различных способов стилизации форм.
Хотя я бы не отказался от статейки по обзору различных способов стилизации форм.
Написать на изображении «No JavaScript» это совсем не комильфо. Если уж что-то и делать, то с обратной совместимостью и с учетом graceful degradation.
Есть такие (глубоко нативные, привычные и необходимые) вещи, которые никто не отменял, например Tab или Shift + Tab. Это должно поддерживаться. Ровно, как и выбрать чекбокс тем же «пробелом».
Фокуса на элементе не видно, без мыши — ноль копеек цена такой форме с такими элементами. Да что это я в самом деле…
Есть такие (глубоко нативные, привычные и необходимые) вещи, которые никто не отменял, например Tab или Shift + Tab. Это должно поддерживаться. Ровно, как и выбрать чекбокс тем же «пробелом».
Фокуса на элементе не видно, без мыши — ноль копеек цена такой форме с такими элементами. Да что это я в самом деле…
Мне больше нравится вариант без использования label. Как-то так jsfiddle.net/9AFKW/8/
Статья хорошая, спасибо. Поставил Like
Но меня всегда печалила необходимость придумывать и указывать идентификатор для атрибута «for», конечно, если форма собирается шаблонизатором, то никаких проблем нету, но для production ваше решение тоже не подходит, хотя бы потому, что не работает управление с клавиатуры.
Я лично предпочту маленький js-файл (~700 байт) для отказа от атрибута «for» и для работающего управления с клавиатуры
Пример
А вообще, в CSS4 Selector API предусмотрен Reference Combinator и Parent Selector для таких случаев. Возможно, в будущем мы сможем написать:
Правило применится к элементу
Жду не дождусь статей «Красивые чекбоксы и радиокнопки на CSS4 без JavaScript» :)
Но меня всегда печалила необходимость придумывать и указывать идентификатор для атрибута «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» :)
Почему же огорчать? CSS такой же живой стандарт, как и HTML. CSS4 всего лишь сокращение для CSS Selector API level 4 и он таки будет, просто под именем CSS. Но я вас уверяю, когда браузеры начнут внедрять CSS Selector API level 4, они в своих пресс-релизах будут использовать именно термин CSS4, как было с HTML5.
Смотрите мой комментарий выше.
Добавил ещё выделение при фокусе jsfiddle.net/9AFKW/30/
Добавил ещё выделение при фокусе jsfiddle.net/9AFKW/30/
Это круто, но, для меня лично, семантически некрасиво. Да и добавьте теперь сюда текст для инпута, да чтобы он ещё был связан с инпутом: клик по тексту -> клик по инпуту
Что уж говорить, я даже twitter bootstrap отредактировал, чтобы он поддерживал
Что уж говорить, я даже twitter bootstrap отредактировал, чтобы он поддерживал
<input> вложенный в <label>Добавил, все работает jsfiddle.net/9AFKW/33/
Где-то я эту идею уже видел. Ах да, в моей статье.
habrahabr.ru/post/150760/
habrahabr.ru/post/150760/
использую этот способ уже второй год, докопался до него через анализ родных чекбоксов в Google Chrome.
Очень круто, спасибо)
у этого способа есть еще один серьезный недостаток.
Нередко случается, что текстовый checkable-контент превышает по своему объему 1 строку (либо съезжает на вторую при увеличенном масштабе системных шрифтов, что не редкость у юзеров маков). В этом случае начало второй строки находится непосредственно под чекбоксом.
Мало того, при высоте битмэпа большей, чем line-height, прыгнет межстрочник.
Нередко случается, что текстовый checkable-контент превышает по своему объему 1 строку (либо съезжает на вторую при увеличенном масштабе системных шрифтов, что не редкость у юзеров маков). В этом случае начало второй строки находится непосредственно под чекбоксом.
Мало того, при высоте битмэпа большей, чем line-height, прыгнет межстрочник.
Описывал подобный способ еще год назад вот здесь.
Sign up to leave a comment.
Красивые чекбоксы и радиокнопки на CSS3 без JavaScript