nulldef Apr 6 2013 at 19:08

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

2 min

50K

CSS*HTML*

Tutorial

From sandbox

+23

Comments 40

Dreddik Apr 6 2013 at 19:19

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

+26

drtitoff Apr 6 2013 at 19:22

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

+50

firestarter Apr 6 2013 at 21:59

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

nulldef Apr 6 2013 at 19:22

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

bytecode_rus Apr 6 2013 at 21:51

почему?

-4

Evengard Apr 7 2013 at 11:50

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

AndreySolo Apr 6 2013 at 19:24

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

novoselov Apr 6 2013 at 19:26

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

+19

rOOse Apr 6 2013 at 19:40

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

+22

naum Apr 6 2013 at 21:34

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

homm Apr 6 2013 at 19:43

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

Dimcore Apr 6 2013 at 20:01

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

Magiq Apr 6 2013 at 20:09

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

Protos Apr 6 2013 at 20:55

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

BuriK666 Apr 6 2013 at 20:59

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

noonesshadow Apr 6 2013 at 21:02

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

-8

GrinDeg Apr 6 2013 at 21:12

Странно, да?

+14

mwizard Apr 7 2013 at 04:11

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

+10

sdevalex Apr 6 2013 at 21:30

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

timonstr Apr 6 2013 at 21:32

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

asmin7 Apr 6 2013 at 21:44

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

pepelsbey Apr 6 2013 at 21:57

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

Spaceoddity Apr 6 2013 at 22:01

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

Triang3l Apr 6 2013 at 22:02

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

UFO just landed and posted this here

Grammka Apr 6 2013 at 23:04

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

ssneg Apr 7 2013 at 00:00

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

Grammka Apr 7 2013 at 00:19

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

Abcd_Efgh Apr 7 2013 at 00:24

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

UFO just landed and posted this here

timonstr Apr 8 2013 at 10:55

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

UFO just landed and posted this here

Dmitry_f Apr 7 2013 at 01:26

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

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

Reey Apr 7 2013 at 10:45

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

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

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

Moor Apr 7 2013 at 16:34

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

bisserof Apr 8 2013 at 07:53

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

denver Apr 8 2013 at 10:35

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

pepelsbey Apr 8 2013 at 11:28

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

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

denver May 2 2013 at 11:09

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

fog Jun 13 2013 at 21:36

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

Show the best of all time