Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью для старых браузеров (т.е. не в ущерб юзабилити), которые не поддерживают современные ...
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация ...
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить ...
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...
Комментарии (105)
Второй недостаток можно исправить, если не скрывать исходный чекбокс через display: none, а оставлять его видимым, но прятать каким-либо способом. Либо вынося за границы экрана, либо при помощи opacity: 0; pointer-events: none;. Тогда фокус можно отображать с помощью. checkbox:focus + …
За границы выносить точно нельзя, т.к. в этом случае опять возникает 1-я проблем. На счет opacity — почему-то я до этого не додумался, надо будет сегодня протестировать.
position: absolute;
opacity: 0;
pointer-events: none;
код выглядит уродливо, но задачу решает.
Большое спасибо за подсказку! Протестировал — теперь действительно все, как положено, обе проблемы устранились. Внес правки в статью.
Получение фокуса можно протестировать на странице примера. А
pointer-events: noneне обязателен, т.к. оригинальный элемент находится под псевдоэлементом.Да, давно видел этот способ) но к сожалению, все хотят, чтобы было одинаково во всех браузерах.
Автору благодарность за статью. Помогла.
Попробовал решение. Выглядит очень эффектно. НО! Но у меня не отправляется значение элемента в форме.Т. е. внешне чекбокс получает состояние checked, а форма его не отправляет.
А нет, пардон, все работает. Замечательное решение.
Особенно веселым оказался этот момент в статье:
Да уж, это теперь не сложно скопировать код и вставить к себе в проект. Спасибо!
Пожалуйста, Андрей. Рад, что тебе понравилось =)
Спасибо, пригодилось
А еще для disabled элементов нужны стили
.checkbox:disabled + label: before {
background: #eee;
}
.radio:disabled + label: before {
background: #eee;
}
Возможно ли, как-нибудь отделить input от label? У меня в проекте чекбокс и текст находятся в разных местах кода.
Нельзя. Вся суть именно в связке этих тегов.
Вам уже ответили, что нельзя, но у меня тоже в разных, получилось сделать дубликатами ов, в разных местах. Кликабельно, главное чтобы «for» был один. А первый просто пустой, рядом с инпутом)
Если убрать id, то не работает.
Что делать, когда много разных для формы
Добавляйте уникальные id. Либо можно сделать так:
А CSS для radio не выложили в статье :)
Все стили есть к коде страницы с примерами.
Ага, понял это, когда скопировал из статьи стили)) и чекбокс заработал, а радио нет. Спасибо за статью, не первый раз выручаете.
Спасибо за красочное оформление radio давно искал такие стили.
Спасибо, пригодилось!
Дима, привет!
Что такое: not (checked)?
И: before и: after это вроде псевдоэлементы, а не псевдоселекторы :)
И тег tt вырезается при комментировании вот «выделил»
Привет.
Это для IE8 и ниже, который не знает такую конструкцию, чтобы в нем не происходила стилизация.
И так, и так говорят, еще и псевдоклассами называют.
Странно, когда я вставляю, все путем. Спасибо, что сообщил, надо разобраться.
Спасибо за статью — классная. Слушай как сделать при наведении ховер на чекбокс (уже стилизованный), что бы к примеру бордюр подсвечивался?
или
Смотря к какой части чекбокса это нужно применить.
Слушай, а как сделать так что бы нажал на чекбокс - стиль включился для определенного класа, отключил — выключается?
Не понял.
Возможно, вместо: not (checked) стоит писать: not (:checked)
Нет, тут именно важно, чтобы в скобках двоеточия не было, иначе переключение поломается.
Ох спасибо!!!
В IE6−8 не работает !
Что не работает?
Спасибо огромное! Очень пригодилось :)
Помогите плс, не знаю что уже и делать. В опере чекбокс вылез за границу label, и получилось что сам чекбокс в правом верхнем углу, а лейбл ниже него. В остальных браузерах все отображается корректно. Спасибо за статью.
Покажите живой пример. Экстрасенсов тут нет.
Спасибо Большое! Выглядит очень круто!
Подскажите пожалуйста новичку как сделать чтобы label и скрытый input публиковались на одной позиции?
Или как для label задать точное место положение?
А то стандартный radio стоит где нужно, но скрыт, а новый и красивый прилип с лева и нечего с ним сделать не могу.)
Спасибо) и не судите строго
Отличная реализация!
Дмитрий, скажите, а возможно ли будет оформить в виде слайдера не только чекбоксы, но и радиокнопки?
Это пригодится в случае, когда управление выбором реализовано двумя радиокнопками, типа «Включить оповещение по e-mail? Да — Нет», а не чекбоксом. И тогда слайдер как раз в тему был бы.
Конечно можно, примените стили от чекбоксов, станут выглядеть так же.
Но это будет 2 слайдера вместо одного… Получается нужно как-то объединить 2 в 1.
Для таких целей используется чекбокс.
Да понятно, но не я это придумал)) А из-за этого править кучу скриптов не особо хочется, а фича со слайдером прикольная :) Вот и думаю, как можно это увязать.