Стилизация checkbox и radio
Вставка
- Опубліковано 3 лис 2020
- Привет! В видео покажу, как правильно делать кастомные checkbox и radio input. Рассмотрим простое, качественное, кроссбраузерное решение, так сказать, без качель)
Макет в фигме:
drive.google.com/file/d/1SuTZ...
Ссылка на мой телеграм канал:
bit.ly/3eaDJKi
Ссылка на телеграм канал с впн:
teleg.one/from0to1ru
Если это не помогает, просто зайдите в телеграм и в поиске введите from0to1ru или марафон по верстке.
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
Реально во всем Ютубе , среди кучи воды и роликов , автор самый красавчик , все четко
благодарю
Вадик один из немногих !
согласен, уже который раз спасает. для русскоязычного сегмента редкость.
Я знаю это, но все равно смотрю, очень хочется поддержать. Спасибо, что ты есть. Бесплатно и доступно. Курсы тоже очень доступные, если есть желание учиться. Ребята, не пожалейте 150 -250 бачей, оно того стоит, ради будущего!
Спасибо, Мастер! Мы уже с тобой так знакомы, а ты этого даже не знаешь)) По твоим видео)
это да)
Каждый раз твои видосы как глоток свежего воздуха в удушливую погоду. Спасибо огроменное!
спасибо, супер)
Вадим привет. Начал смотреть тебя со старых видео, и в первые увидел тебя без очков, какие же у тебя красивые глаза.
спасибо! самый понятный мануал из всего что видела до сих пор
Это лучшее объяснение по стилям radio button , спасибо огромное!
Огромное спасибо за Ваши уроки - это просто клад! Я можно сказать совсем новичок, но тут на все свои трудности нахожу ответы простым языком! От души благодарю и желаю процветания
Спасибо, я рад )
Вадим супер! Щас как раз очень нужно было в этом разобраться, я даже не ожидал! Спасибо.
Вадим, привет. Спасибо огромное. Понятно, доступно, актуально! ) В общем как всегда респект и Лайк!)
Вы очень доступно объясняете, спасибо большое!
Как раз такую вечеринку стилил на макете.
Как знал шеф) Спасибо за видео.
Какое счатье, что нашел твои уроки! Подробно, понятно, хорошие не детские примеры, и очень доходчиво наглядно объясняешь - спасибо тебе самое огромное! И с юморком!)
Марафоны вообще огонь, по ним можно новой специальностью овладеть
Продолжай!))
Было бы интересно какие-то более сложные страницы на wordPress посажать
Ой, кайф, новый видос! Стилизовала чекбоксы всего один раз, было утомительно))) посмотрю твой видос, чтобы убыстриться!
Супер! Спасибо! А сделаешь, еще видео такого же плана, только по SELECT?
Про select много видео на ютубе есть. Но на такое я не натыкался, ну я как бы и не искал. По сути можно сделать свои select и radio и check кнопки сделать как свою личную библиотеку. Без jquery плагинов и т. д.
Слушай, только сегодня искал инфу как делать радио и чекбоксы,ты прям вовремя 😉
отлично!
Самая четкая вечеринка😉 согласен с комментариями ниже, видео жду лично я прям 24 часа в сутки, 7 дней в неделю 💪
Спасибо, видео крутое! Всё очень доступно и интересно)) как же мало я знаю css свойств..))
Шикарный разбор! Спасибо
Четко ) спасибо Вадим 👍
Здравствуйте! Благодарю за видео!
You know, I have to say, it's absolutely brilliant)))
Попал на это видео после верстки многостраничника) Спасибо, понятно обьяснил
Супер!!!
Вадим, сделай пожалуйста видео про градиенты( как задать направление градиенту, как сделать его плавно переходящим в прозрачный) . И про бордеры! Как их сделать плавно прозрачными (допустим в правой или в левой части).
Ну и балдеееж, очень полезно. Спасибо) хотелось бы видеть видосики почаще))) но я не настаиваю... возможно только чуть чуть, но не сильно... ну ты понял) не болей😉
да, и я хочу)
Как всегда топ))
Прикольно! Как ни странно, оказалось полезное информацией! Раньше всегда делал через JS и display none. Аналогично и с Select. Единственное, что, насчёт отношения Гугла к сайту с отмененным outline - думаю, что это все сказки) никак оно не влияет на отношение к сайту и ротацию в поисковиках)
круто, теперь я понял как это делать, только вот хотелось еще видос про стилизацию input type="range"
, было бы вообще огонь
Просто, доступно, цікаво!))
Очень полезное, интересное видео.
у кого не срабатывает обводка при нажатии на Tab (19:23) добавьте ко всем вот это - tabindex="0". Мне помогло.
лайк + подписка! Удачи во всем!
Топ как всегда 🔥 🔥
Было бы интересно посмотреть на такой же универсальный метод реализации выпадающих многоуровневых меню, а то на всех ютубовских мастер-классах верстают простенькие менюшки. Заранее спасибо!)
Громадное спасибо, очень кстати!!!!!!!!!!!
Какие люди :)
Бонжорно.
DEN PRO привет привет )
Вадим, при всем уважении, спасибо тебе за твои труды, а видос по js будет?
Вадим спасибо!
ТЫ ЛУЧШИЙ!!! ;)
спасибо)
спасибо, заебись контент, то есть вечеринка.
Лучший!
Вот думаю, что знаю как это делать, просто посмотрю новый видосик от Вадосика, так нет же, всё равно удивит и что-то новое расскажет. Не знал что их нехорошо отключать через display: none, а нужно вот так скрывать или подобным образом. Спасибо, буду знать
Годнота =)
Спасибо!!!
Отлично! Спасибо! Можешь исходники разместить в инфобоксе?
О,спасибо)
Вадосик ты как то говорил что с зала выползаешь каждую тренировку ) может все таки надо сбавить обороты с учетом твоей ментальной работы да и в целом эт же быстрей тебя к перетрену приведет или запал скиснет быстрее ) я слышал что тут надо все варьировать )
Где ж ты был с этим в июне??
Сейчас бы меньше правил((((
А видос - класс. Все проблемы человечества решил!
Пуанкаре разгадали, чекбоксы застилили, чего еще там осталось?
Спасибо!
ПС - почему инсту забросил?
То, что было нужно
Очень круто, как и когда можно пройти платный курс ?
А свойство для инпута appearance подходит для использование? Скрытие стандартного инпута?
Может уже спрашивали об этом в комментах, но я чет не видел... Вадим, скажите плз, какую тему в VSCode вы используете? Сколько не гуглил, именно такого варианта не смог найти. One Dark Pro похожа по цветам синтаксиса, но общий бэкграунд значительно светлее, что не очень радует глаз т.к. привык к более темному, как у вас. В следствие этого использую только стандартную "Dark + default dark". У нее цвета синтаксиса не так радуют конечно, как в вашем варианте
material
@@vadymprokopchuk Нашел, спасибо!
Так это почти 1 в 1 урок Вадима Макеева "Кастомные чекбоксы правильно"
Сними видео «натяжка верстки на вордпресс»
19:27 А можно ли сделать так чтобы при нажатии не появлялась эта тень (чтобы только появлялась при нажатии tab), но и accessibility чтобы не ругался
19:47 Вот тут при нажатии появляется тень
В .radio-box { padding-left: 20px; } ничего не делает. Ошибка ? Только .radio-style { margin-left: -20px; } двигает span.
Спасибо за видео, интересная тема)
Спасибо огромное за полезный видос)
Может мне кто-нибудь объяснить, как ширина и высота сработала на строчном элементе
Не думаю, что еще актуально, но элементу label было присвоено свойство display block, поэтому.
@@marynapastukhova8119 Владос ещё span'у задал position: absolute; Может в этом дело, а то я думаю display: block никак не повлиял на это
можно больше черных историй ?
Почему самому инпуту не делать афтер, бефор элементы и не использовать спан?с размером 1пх его не будет видно за нашими псевдообъектами
Диплодок =)
Повторил. В целом, получилось. Но не понял, почему у меня сами чекбоксы чуть выше уровня текста. Код сверил два раза.
Все красиво конечно, но на радио кнопках не работает фокус с tab и включение радио-кнопок с пробела. Т.е. много сказано о доступности, но не реализовано. Вывод верстка нежизнеспособна? или я не с той стороны смотрю. я студент и не пониманию пока. Нам тут на курсах задают задачу это всё реализовать, как это сделать конечно надо искать самим)
Материал - топ! Впрочем, как обычно, это же Вадим)) Если не затруднит, подскажите в каком направлении копать, чтобы сделать карточку товара, как в примере xn----8sbnmcidde2b.xn--80adxhks/#catalog Чтобы при клике по размерам менялась цена, и при нажатии кнопки Заказать, в заказ ушел именно выбранный товар и размер. Может есть на примете урок по решению схожей проблемы.. Заранее благодарю!
10:15 как поставить тоже так много курсоров?
Отлично! Спасибо Вадос! Вот еще вариант стилизации от Макеева, на всякий, как вариант ua-cam.com/video/E6kLaaQFctU/v-deo.html
Лейбэл, инпут, чекбокс, перестаскивает строчку как-то через другие строки(инпут закинул в лэйбл). Не, рано мне ещё такое.
)))
Like and subscribe!! also thx for the figma!
не работает переключение чекбоксов, вроде все делал по видео. Вообще сложное объяснение, запутанно, если тупо повторять.
Ребята не делайте так как он показал, пожалуйста! Пустые DOM элементы такие как "span.radio-style" это ЗЛО! Того же самого можно было бы добиться через задание класса label.custom-class + after и before.
А чо без ренджа?Слабый шоль?=)