Стильный CSS переключатель без JavaScript

[Dreddik]

Круто, конечно. Но его хочется потянуть, а этого нельзя сделать.

[drtitoff]

А мне наоборот: тянуть не хочется, но хочется, чтобы он переключался, даже если нажать на пустую область, а не только на саму кнопочку.

[firestarter]

Да, и все потому, что на всем переключателе курсор — pointer. Стоит сделать pointer только для label и переключатель будет намного понятнее. А вообще идея просто отличная.

[nulldef]

В таком случае уже нужен JS

[bytecode_rus]

почему?

[Evengard]

Сделайте переключатель без JS

[AndreySolo]

Обычный переключатель. Кстати, блюр обрезается.

[novoselov]

Непонятно почему нужно нажимать именно на шестиугольник, а не на весь переключатель?
Подсветка лампочки обрезанная, а должна быть круглая :)

[rOOse]

Я делал такое, тоже CSS, только без картинок cssdeck.com/labs/hp17u02i а pepelsbey еще раньше с SVG pepelsbey.net/2012/08/stylish-switch/

[naum]

Оба варианта намного интереснее, чем в статье. Как с точки зрения логики (клик в любом месте), так и с точки зрения реализации в целом. Отличные примеры.

[homm]

Сразу бросилось в глаза, что свечение на бэкграунде обрезано справа.

[Dimcore]

Таки действительно бросилось в глаза обрезанное свечение, да и не сразу въехал, что нажимать можно не на весь чекбокс. А так вообще, классно. Пока неочень понял как оно плавно работает, позже поковыряю transition

[Magiq]

Лично я на блок не кликал, все таки кликабельную часть сделать лучше всей, а не конкретный участок.

[Protos]

Зеленый свет обрезается справа(

[BuriK666]

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

[noonesshadow]

ie8 и младше не поддерживают

[GrinDeg]

Странно, да?

[mwizard]

В Links тоже не работает. Не понимаю, куда смотрит автор?

[sdevalex]

Нужно картинки для такого делать спрайтами… Иначе первый раз исчезает фон при переключении.

[timonstr]

Раз в месяц кто-нибудь пишет на хабр пост о переключателе на чистом css.
http://pepelsbey.net/2012/08/stylish-switch/

[asmin7]

Элегантно! Голь на выдумку хитра :-). Но для реализации всего ожидаемого пользователям функционала и удобства потребуется всё это выбросить и написать с нуля, используя javascript.

[pepelsbey]

Поставьте, пожалуйста, свойства без префикса последними в списке — это важно. Почему? Ответ в статье Мейера про префиксы, ближе к концу: Префикс или постхак.

[Spaceoddity]

Какой же это «чистый CSS» — если картинки в бэкграунде используются? Формулировка «чистый CSS» обычно как раз и подразумевает отсутствие изображений.

[Triang3l]

Красиво, конечно, но слишком уж громоздко. Для личной странички или портфолио отлично, а на практике напоминает 2000-е.

[Grammka]

jsfiddle.net/axwNY/ накидал за пару мин пример получше имхо (стили можно нанизывать уже любые… и без картинок можно обойтись)

[ssneg]

Ну вот, а могли бы статью! :)

[Grammka]

бред — писать статью про это…

[Abcd_Efgh]

Ну, почему же — по-моему, ваш пример выглядит гораздо более стильно, чем то, что представлено в посте.

[timonstr]

То, что это где-то работает — явно баг. Псевдоэлементы :before и :after существуют в контексте элемента, а что может быть внутри input?

[Dmitry_f]

как сделать переключатель на основе input-а на чистом CSS.

А слабо по-настоящему на чистом CSS сделать такое, без картинок то бишь?

[Reey]

Эх, можно бы было такое для конструкции вида:

<label><input type="checkbox"/></label>

Поскорее бы в CSS возможность выбирать предков элемента.

[Moor]

По-моему, лучший на сегодня — lea.verou.me/2013/03/ios-6-switch-style-checkboxes-with-pure-css/
Плюс там используется интересный способ отсева старых браузеров — стили сделаны для чекбокса с псевдоклассом :root

[bisserof]

pepelsbey.net/pro/2012/08/stylish-switch/check.html

[denver]

Поддерживаю, лучше еще и потому, что поддерживает фокус и изменение пробелом. Все остальные (включая уважаемого pepelsbey) забывают что по элементам еще можно (и иногда удобнее) перемещаться без мыши.

[pepelsbey]

Обновил пост, теперь пример с чекбоксом реагирует на таб и слушается пробела, а вот с радиокнопкой (доп. примером в конце) сложнее: их под слайдером две и сделать переключение по пробелу не получится.

Спасибо за подсказку.

[denver]

Здорово, в который раз впечатляюсь твоей талантливостью :)

[fog]

Демо и файлы не работают больше…