✅ Кастомные чекбоксы правильно

00:00 Интро
01:22 Дизайн и экспорт
02:52 Простая разметка
06:53 Прятки чекбокса
08:48 Чекбокс картинкой
14:44 Картинка инлайном
17:13 Чекбокс стилями
22:00 Прятки совместимо
24:57 Чекбокс инлайном
27:45 Выводы

* * *

Камера: Lumix GH5 + DMW-XLR1
Объектив: Lumix 20 мм, f/1,7 II
Микрофон: Audio-Technica AT4053b
Свет: Aputure Light Storm 120t + Light Dome
Софт: Final Cut Pro, iZotope RX

[шмяка]

Единственный волг, который я смотрю на первой скорости.)))

[alexbobykin]

Вадим как всегда великолепен! Спасибо.

[polyskalov]

Можно также вешать стили на сам чекбокс с appearance:none. В этом случае дополнительные элементы (как в примере div.check__box) будут не нужны. Не проверял, но полагаю в ie они будут выглядеть как обычные системные чекбоксы.

[TsAex]

1. С возвращением! Очень ждали
2. Как относитесь к такому варианту, когда галочку чекбокса рисуют прямоугольным блоком, развернутым на 45° без верхней и правой границы?
3. Когда используется дополнительный span в разметке чекбокса как на видео - это норм? Нужно всегда помнить что его следует туда вставить и еще это лишний элемент в разметке. Хотелось бы просто вставлять label + input:checkbox и получать результат. Такое возможно? Может с помощью псевдоэлементов
4. Правильная верстка 'Звездного рейтинга' будет?

[denysdzhelomanov]

А что на счет прятать checkbox свойством left:-100vw; ?

[jenya]

Спасибо, отличный урок!
Но если с чекбоксами и радио все понятно, то остается вопрос, как стилизовать option в селектах? На сколько я понимаю, такой способ к ним не особо применим.

[vic_shine]

Скучаю по таким полезняшкам.. Вадим, возвращайся на YouTube! :)

[pegorova]

вы чудесный
подача, материал все прекрасно
я в начале пути изучения, и так рада что мне порекомендовали ваш канал <3

[andreyn.]

то чувство, когда 3 года страдал от болезни копипаста стилей чекбокса|радио с кодпена, но пришел к доктору и вылечился за один сеанс)

[alexandraweather]

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

[АлексейСкобелев-вч]

Вадим, спасибо вам огромное! Я искренне надеюсь, что вы не пропадёте с просторов ютуба. Я видел ваши семинары (смотреть одно удовольствие). Вы замечательно доносите информацию и вообще приятно смотреть ваши видео. Это очень интересно и крайне полезно. Вы делаете большое дело. Не останавливайтесь! Спасибо!!!

[КонстантинБуря-дб]

Так основная проблема, это создание кастомной анимации у checkbox

[mrakov]

Лайк как минимум за вложенный инпут в лейбл, всегда задаюсь вопросом зачем айди + фор(лишний код) :)

[ВВПЧП]

Спасибо! Всегда прятал checkbox через display: none; и думал что это правильно. Мотивируете писать код правильно.

[MrCortc]

Никогда не делайте блоком label, теперь будете тыкать в пустое место рядом с текстом на экране, а чекбоксы будут включаться.

[yourbadapple]

Интересно, но я никогда табом не пользовался для переключения, мне куда легче мышкой навести на нужную, особенно если там больше 4х чекбоксов. Я один такой?

[АртёмШ-юм]

Дополню, что галочка ✓ тоже легко делается через CSS. Это по сути прямоугольник с двумя прозрачными сторонами повернутый на 45 градусов 😉

[Levelord]

Мне нужна эта футболка!

(можно не конкретно эту)

[Veremey]

Спасибо, Вадим.
Будет круто узнать о кастомных селектах.
Возможно ли сделать кастомный слайдер с минимумом скриптов.

[sashayakovlev]

Как же я не видел эти видео! Даже я все понял и с css и Linux.
Обязательно пересмотрю все ролики и попрактикуюсь.
Автору мегареспект!!!