Тёмный
No video :(

CSS фичи #9 ➤ Чекбокс-кнопки CSS | CSS custom checkbox input style 

Glo Academy
Подписаться 146 тыс.
Просмотров 42 тыс.
50% 1

Мы продолжаем рубрику CSS-фичи!
Сегодня мы узнаем, как сделать свою radio кнопку или кнопку чекбокс (checkbox input css). Я покажу вам принцип работы label и состояния checked. Вам остается только применить это на практике!
Как всегда ссылка на исходники: codepen.io/Ais...
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Получить нужные материалы для любого веб-разработчика - taplink.cc/glo...
Получить консультацию куратора - bit.ly/2Ym5SqS
Связаться с автором: aislam23 telegram: t.me/aislam23
Мой блог: islamov...
Больше контента в нашей группе Вконтакте
glo_aca...
Присоединяйтесь к нашему сообществу Discord
/ discord
Мой канал в telegram "Лысый из браузера"
tele.click/bal...
Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
vk.me/glo_academy
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma...
ttttt.me/figma...
ttttt.me/figma...
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codep...
ttttt.me/css_f...
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkf...

Опубликовано:

 

4 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 111   
@eugeneshiyan
@eugeneshiyan 5 лет назад
14:30 включите субтитры
@Glo_Academy
@Glo_Academy 5 лет назад
Ахаха, норм)
@michaelfilenko8598
@michaelfilenko8598 6 лет назад
Больше CSS-фич, ещё больше)))
@AlexDanilenko
@AlexDanilenko 6 лет назад
Шикарный урок! У меня весь вечер вчера не получалось стилизовать before. Оказалось дело в плюсе...
@chrispichris2319
@chrispichris2319 5 лет назад
Спасибо тебе! Так медленно, основательно и прям до мелочей рассказал!
@user-js5kt2pr7s
@user-js5kt2pr7s 2 года назад
Спасибо большое, давай ещё)))
@user-qu1zi6ug8r
@user-qu1zi6ug8r 4 года назад
Спасибо тебе за потраченое время на ролик, для меня было все логически и понятно объяснено как делается данная процедура стилизации👍
@bonusdiez
@bonusdiez 5 лет назад
Incredibale! Где же был этот видос, когда я интенсив от Ивана Петриченко по JS проходил)) там он заставил попотеть со стилизацией чекбокса.. Спасибо! Must Have! Top!
@user-yy8vo2tf9z
@user-yy8vo2tf9z 4 года назад
Артем дякую Вам, Ваші уроки шикарні
@SVolikov
@SVolikov 6 лет назад
+ Кроме знаний, нужно еще уметь преподнести эти знания просто и доходчиво. Спасибо!
@asgart_vocal
@asgart_vocal 6 лет назад
Не мало важный момент, для тех кто не знает. Просто так в name будет передано одно значение. Что бы php воспринимал все переданные значения checkbox необходимо писать так: name="food[]" Тогда будет передан массив значений, который уже на php разбирается и обрабатывается. В противном случае в name="food" будет всего лишь одно значение.
@user-jk4rm2hw1t
@user-jk4rm2hw1t 4 года назад
Ну как ска ??? Ты объясняешь так просто, я в шоке) Продолжаю смотреть, просто невероятно)))
@petthejir3394
@petthejir3394 Год назад
Отличное видео, очень помог.
@Faltfromoss
@Faltfromoss 6 лет назад
1. Жирнющий лайк за эту серию приёмов CSS с подробным и доходчивым пояснением! 2. Почему последнее на данный момент (10-е) видео в плейлисте недоступно? Оно в списке есть, но пишет "Видео с ограниченным доступом". Или это только у меня? 3. К вопросу о пожеланиях: сделай несколько роликов о том как на чистом css изобретать фигуры. Начиная от простых треугольников и вплоть до шестеренок, к примеру. Как по мне очень интересная и довольно непростая тема.
@sonterix
@sonterix 6 лет назад
Почему у тебя постоянно разный фон?)) Спасибо за урок, интересно как это круче анимировать. Вообще очень интересна тема css и js анимаций на реальных примерах!
@armorunit6970
@armorunit6970 Год назад
Круто, спасибо!
@hereticmaggot9833
@hereticmaggot9833 6 лет назад
Артём, очень интересная подача материала, хотелось бы увидеть слайдер, который бы менял картинку и цвет фона (на радиокнопках)
@3dzbot
@3dzbot 5 лет назад
idangero.us/swiper/
@eugenepopov4355
@eugenepopov4355 6 лет назад
Очень полезно! Вообще, я для себя открыл CSS заново благодаря твоим CSS-фичам! Больше уроков!)
@user-jd4sm7lg1n
@user-jd4sm7lg1n 4 года назад
Очень полезно. Очень нужная фича для проектов. Спасибо, Артём!
@andriiyurchuk3299
@andriiyurchuk3299 5 лет назад
Очень хорошо обьясняете. Лайк
@andreykhalepov8260
@andreykhalepov8260 6 лет назад
Действительно крутая фишка. Спасибо.
@yippeeki-yey
@yippeeki-yey 6 лет назад
Нужно больше видео!
@stivandpolli9117
@stivandpolli9117 3 года назад
Хороший урок. Спасибо.
@evgeniakaistro6520
@evgeniakaistro6520 4 года назад
Спасибо! Супер понятное объяснение
@semeteyboronbaev6184
@semeteyboronbaev6184 3 года назад
Уважаю тебя лысый из Браузер
@user-tg1ge6oi2v
@user-tg1ge6oi2v 4 года назад
Помог , СПАСИБО!
@pavelivanov3590
@pavelivanov3590 4 года назад
Ты лучший!!
@ivanubdw
@ivanubdw 6 лет назад
Очень полезно, здорово было бы ещё увидеть анимацию)
@vitaliymakarchikov1699
@vitaliymakarchikov1699 6 лет назад
шикарно, делай побольше таких видео
@user-nv9ur6um4b
@user-nv9ur6um4b 6 лет назад
Как всегда на высшем уровне:)
@andriikuzmichov4022
@andriikuzmichov4022 6 лет назад
Круто, очень хочу увидеть анимации для этих кнопок
@one-zero-dev
@one-zero-dev 6 лет назад
Вооот это годнотааа! Спасибо, Артём ) Очень полезный урок! Однозначно лойс )
@victoria.serbichenko
@victoria.serbichenko 6 лет назад
Спасибо!)) Классный урок) Интересно, как можно это можно круче реализовать.
@user-gf2bj8jv2t
@user-gf2bj8jv2t 6 лет назад
Очень полезно и главное доступным языком. Можно ли какую-нибудь фичу про анимацию!!!
@user-df4id7jo4i
@user-df4id7jo4i 5 лет назад
Спасибо! Все супер!
@alexkindra19
@alexkindra19 4 года назад
благодарю, сильно помог
@stasmaksimov9531
@stasmaksimov9531 6 лет назад
Крутеллос! 💪 спасибо!
@scrlmn1425
@scrlmn1425 6 лет назад
Круто!
@e1jo
@e1jo 6 лет назад
По формам больше б выпусков. Там очень много чего есть я думаю что показать.
@seobaron
@seobaron 6 лет назад
Круто!)
@user-hs7ye2lr7x
@user-hs7ye2lr7x 6 лет назад
классный урок!
@JavaScriptcher
@JavaScriptcher 3 года назад
Благодарю!!!!
@maksonix3985
@maksonix3985 6 лет назад
Прикольно)) спасибо за урок!
@ogurcik_01
@ogurcik_01 6 лет назад
про select пожалуйста!
@user-tr8mn1bx9d
@user-tr8mn1bx9d 6 лет назад
Мне нужно больше анимации!!!)
@verginiabools2563
@verginiabools2563 6 лет назад
Артём, можешь пожалуйста по-подробнее рассказать про flex-элементы, пожалуйста.
@user-ev4vh8cm2x
@user-ev4vh8cm2x Год назад
Круто, очень мало видео которые доносят суть как это работает.
@adventure229
@adventure229 4 года назад
очень полезное видео👍
@Александр-Беляев
Урок крутетский! Лайк Но блин музыка приелась пипец, миллион видосов на RU-vid с этой бесплатной музыкой (( По пробую найти сайт, где нейросеть пишет музыку, и её можно использовать на RU-vid, как свою.
@alexg0490
@alexg0490 4 года назад
Спасибо помог!
@konovaalovv5386
@konovaalovv5386 6 лет назад
Знаю что не по теме но... Можешь записать видео, про слепую печать на клавиатуре. Пожалуйста, будет очень интересно послушать.
@mishatrick
@mishatrick 6 лет назад
Хотелось бы увидеть, как запретить отправку формы если на чекбоксе не стоит галочка и соответственно всплывал текст, о том, что нужно поставить галочку. Спасибо за видео, полезно
@max_samusevich
@max_samusevich 6 лет назад
Misha Trick можно в инпут с чекбоксом добавить атрибут required, а всплывашку реализовать через условие джаваскрипта
@alexandrstelmakh73
@alexandrstelmakh73 6 лет назад
Привет! Запиши урок о привязке к скроллу (scroll-snap)
@spadar1602
@spadar1602 5 лет назад
Какая годнотеееень
@FeranDAq
@FeranDAq 6 лет назад
осталось добавить что инпут чекбокс хоть и выключен, но несет функциональную нагрузку. Т. Ё. будет отправлять на сервер данные что элемент выбран в случае чего
@thesijisgame6590
@thesijisgame6590 6 лет назад
Сделай выпуск где будет скролинг по блокам сайта. чтоб блоки были в размер всего экрана и скролились не обычно а по блокам. Буду признателен.
@user-vx1fx1nz7z
@user-vx1fx1nz7z 5 лет назад
Сними про стилизацию selecta вместе с css и js как положенно
@denisborisov4749
@denisborisov4749 6 лет назад
Форма обратной связи
@arengevorgyan2088
@arengevorgyan2088 4 года назад
a yesli u minya mnog ov?,no ya xachu chto bli tok checkbox?
@farm_planets
@farm_planets 4 года назад
Спасибо)
@urushadze
@urushadze 6 лет назад
Сними о том как загружать фото на сайте быстрее
@dmitry6424
@dmitry6424 5 лет назад
спасибо
@user-sz8tl8cb5v
@user-sz8tl8cb5v 6 лет назад
Хороший урок, а как стилизовать ?
@lexusgt
@lexusgt 6 лет назад
+1 за select
@AlexDanilenko
@AlexDanilenko 6 лет назад
Поддерживаю! )
@ashonetak
@ashonetak 6 лет назад
верстать самому их как список в блоке, + js
@AlexDanilenko
@AlexDanilenko 6 лет назад
А будет ли информация из списка передаваться в форму?
@san88k
@san88k 5 лет назад
это такой себе подход. на десктопе все будет красиво. но, например, на айфоне, такой блок уже не будет определяться как селект, не будет появляться кинетическое колесо с прокруткой оптионов и тд. короч, сам внешний селект более-менее стилизуется, а внутренности очень хреново, а подмена его на див+ жс хреново работает на мобилах.
@arturk2363
@arturk2363 6 лет назад
Нада делать четко з галочкой!
@Utamatamakin
@Utamatamakin 4 года назад
Прикольно, благодарю за урок А как делается стилизация самих стрелок(галочек, птичек). Как стилизовать checkbox arrow? Если кто владеет информацией, поделитесь.
@user-vo7sm5sz7p
@user-vo7sm5sz7p 4 года назад
через :after
@Utamatamakin
@Utamatamakin 4 года назад
@@user-vo7sm5sz7p не, я о том как саму стрелку стилизовать. К примеру там хвост длиннее и закруглен, начало толще, Как вообще это все делать?
@user-vo7sm5sz7p
@user-vo7sm5sz7p 4 года назад
@@Utamatamakin примитивные галочки делаются через after, а если нужно что-то посложнее, то делать как Артём в видео показывает, вставлять фоном картинку или иконку
@j3tyyl1nk19
@j3tyyl1nk19 6 лет назад
Артем можешь пожалуйста записать урок по паралакс-эффекту)
@Glo_Academy
@Glo_Academy 6 лет назад
Записал. Скоро выложу)
@j3tyyl1nk19
@j3tyyl1nk19 6 лет назад
Glo Academy спасибо большое
@user-yd1di2gn9y
@user-yd1di2gn9y 6 лет назад
codepen.io/anon/pen/jKvXWe (Чтобы не происходило случайного выделения текста при клике на вариант, можно добавить ::selection { background: transparent; })
@Alexey_Gri
@Alexey_Gri 6 лет назад
+
@woodzimierz9621
@woodzimierz9621 5 лет назад
Отлично! Где можно глянуть возможные операторы кроме плюса? Я понимаю что в спецификации, но там сотни страниц. Можно конкретную ссылку?
@denisborisov4749
@denisborisov4749 6 лет назад
1000 лет жду
@magzhanamangeldiuly8221
@magzhanamangeldiuly8221 6 лет назад
А можно ли сделать стиль от Material Design на компоненты, а именно эффект волны (ripple).
@maruf4ik
@maruf4ik 6 лет назад
как стилизовать input type search
@wasiliyiprodan7787
@wasiliyiprodan7787 3 года назад
Почему не можно было использовать псевдоклассы ?
@user-mf5wi8cc9g
@user-mf5wi8cc9g 3 года назад
галочка не появляется после вставки пути
@mikolaiprakunin5689
@mikolaiprakunin5689 6 лет назад
Почему ты не использовал псевдокласс "after"?
@vladyslavvin
@vladyslavvin 6 лет назад
Данный способ немного устарел, кого не беспокоят динозавры, рекомендую к input appearance: none; дальше стилизуйте как душе угодно.
@DevBer
@DevBer 6 лет назад
Vladislav Magdenko можно поподробнее? =)
@KrZn104
@KrZn104 5 лет назад
Артём, спасибо! Доступно объясняешь! Из этого видео я понял, что из чекбокса можно сделать даже навигационное меню. То есть, ИКОНКА ГАМБУРГЕРА - справа слово МЕНЮ. А можно сделать так что, при клике раскрывалось меню (Главная О компании и т.д), сам ГАМБУРГЕР становился КРЕСТИКОМ, как ты показывал в одном из видео, а слово МЕНЮ превращалось в слово ЗАКРЫТЬ и наоборот? Буду рад увидеть эту фичу, Спасибо!
@FishkiWebflow
@FishkiWebflow 6 лет назад
Спасибо за урок. Есть вопрос.. а как сделать так, что бы из нескольких радио баттон был один уже отмечен.(выбран) ?
@fdskaasdyt
@fdskaasdyt 6 лет назад
webref.ru/html/input/checked
@sergey1727
@sergey1727 4 года назад
как сделать без label?
@Александр-Беляев
Вот, нашёл ссылку где нейросеть пишет бесплатную музыку www.jukedeck.com/
@_oxios_
@_oxios_ 6 лет назад
Тема : прелодер
@raloynner9385
@raloynner9385 6 лет назад
когда input.checkbox ( display: none) проблем разве не будет при отправки формы ?
@hereticmaggot9833
@hereticmaggot9833 6 лет назад
rus Madison можно юзать класс visually-hidden))
@raloynner9385
@raloynner9385 6 лет назад
ты хотел сказать стили наверно ) но там всеравно пару пикселей будет в потоке
@hereticmaggot9833
@hereticmaggot9833 6 лет назад
rus Madison нет, нет будет, загугли этот класс и почитай что там к чему
@deanArtDev
@deanArtDev 6 лет назад
Что за уличная магия у меня, первый input скопировал и вставил фича с кликом по слову работает, следующий прописал руками аналогично он не пашет. Руки крюки это понятно, но, все же подскажите в чем может быть косяк. codepen.io/Sitho333/pen/yxypLr В sublime text 3 такая же ерунда.
@user-gc1id9zt9x
@user-gc1id9zt9x 6 лет назад
в теге «label» ошибка
@deanArtDev
@deanArtDev 6 лет назад
Спасибо)
@denisborisov4749
@denisborisov4749 6 лет назад
Модальное окно
@maximumzlosti
@maximumzlosti 6 лет назад
Суперски! Спасибо!!!
@japananimetime
@japananimetime 6 лет назад
Спасибо!
Далее
Стилизация checkbox и radio
31:30
Просмотров 24 тыс.
Стилизация checkbox, radio, select на CSS
23:33
Checkbox для заказчика. JavaScript
14:12
Просмотров 12 тыс.