CSS фичи #9 ➤ Чекбокс-кнопки CSS | CSS custom checkbox input style
Рет қаралды 42,051
6 жыл бұрынМы продолжаем рубрику CSS-фичи!
Сегодня мы узнаем, как сделать свою radio кнопку или кнопку чекбокс (checkbox input css). Я покажу вам принцип работы label и состояния checked. Вам остается только применить это на практике!
Как всегда ссылка на исходники: codepen.io/Aislam23/pen/aKjmjy
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Получить нужные материалы для любого веб-разработчика - taplink.cc/glo_web_academy
Получить консультацию куратора - bit.ly/2Ym5SqS
Связаться с автором: aislam23 telegram: t.me/aislam23
Мой блог: islamov_blog
Больше контента в нашей группе Вконтакте
glo_academy
Присоединяйтесь к нашему сообществу Discord
/ discord
Мой канал в telegram "Лысый из браузера"
tele.click/baldfrombrowser
Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
vk.me/glo_academy
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/billing/pl.php?... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma2html
ttttt.me/figma_start
ttttt.me/figmatamplates
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codepen_js
ttttt.me/css_features
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkforwork
@eugeneshiyan 4 жыл бұрын
14:30 включите субтитры
@Glo_Academy 4 жыл бұрын
Ахаха, норм)
@AlexDanilenko 6 жыл бұрын
Шикарный урок! У меня весь вечер вчера не получалось стилизовать before. Оказалось дело в плюсе...
@user-qu1zi6ug8r 4 жыл бұрын
Спасибо тебе за потраченое время на ролик, для меня было все логически и понятно объяснено как делается данная процедура стилизации👍
@eugenepopov4355 6 жыл бұрын
Очень полезно! Вообще, я для себя открыл CSS заново благодаря твоим CSS-фичам! Больше уроков!)
@chrispichris2319 4 жыл бұрын
Спасибо тебе! Так медленно, основательно и прям до мелочей рассказал!
@michaelfilenko8598 6 жыл бұрын
Больше CSS-фич, ещё больше)))
@bonusdiez 5 жыл бұрын
Incredibale! Где же был этот видос, когда я интенсив от Ивана Петриченко по JS проходил)) там он заставил попотеть со стилизацией чекбокса.. Спасибо! Must Have! Top!
@user-jd4sm7lg1n 4 жыл бұрын
Очень полезно. Очень нужная фича для проектов. Спасибо, Артём!
@user-yy8vo2tf9z 4 жыл бұрын
Артем дякую Вам, Ваші уроки шикарні
@one-zero-dev 6 жыл бұрын
Вооот это годнотааа! Спасибо, Артём ) Очень полезный урок! Однозначно лойс )
@user-nv9ur6um4b 6 жыл бұрын
Как всегда на высшем уровне:)
@andreykhalepov8260 6 жыл бұрын
Действительно крутая фишка. Спасибо.
@user-js5kt2pr7s Жыл бұрын
Спасибо большое, давай ещё)))
@andriiyurchuk3299 4 жыл бұрын
Очень хорошо обьясняете. Лайк
@evgeniakaistro6520 4 жыл бұрын
Спасибо! Супер понятное объяснение
@vitaliymakarchikov1699 6 жыл бұрын
шикарно, делай побольше таких видео
@maximumzlosti 6 жыл бұрын
Суперски! Спасибо!!!
@user-jk4rm2hw1t 4 жыл бұрын
Ну как ска ??? Ты объясняешь так просто, я в шоке) Продолжаю смотреть, просто невероятно)))
@petthejir3394 Жыл бұрын
Отличное видео, очень помог.
@SVolikov 6 жыл бұрын
+ Кроме знаний, нужно еще уметь преподнести эти знания просто и доходчиво. Спасибо!
@armorunit6970 Жыл бұрын
Круто, спасибо!
@stasmaksimov9531 6 жыл бұрын
Крутеллос! 💪 спасибо!
@ivanubdw 6 жыл бұрын
Очень полезно, здорово было бы ещё увидеть анимацию)
@maksonix3985 6 жыл бұрын
Прикольно)) спасибо за урок!
@yippeeki-yey 6 жыл бұрын
Нужно больше видео!
@seobaron 6 жыл бұрын
Круто!)
@user-df4id7jo4i 4 жыл бұрын
Спасибо! Все супер!
@scrlmn1425 6 жыл бұрын
Круто!
@Faltfromoss 6 жыл бұрын
1. Жирнющий лайк за эту серию приёмов CSS с подробным и доходчивым пояснением! 2. Почему последнее на данный момент (10-е) видео в плейлисте недоступно? Оно в списке есть, но пишет "Видео с ограниченным доступом". Или это только у меня? 3. К вопросу о пожеланиях: сделай несколько роликов о том как на чистом css изобретать фигуры. Начиная от простых треугольников и вплоть до шестеренок, к примеру. Как по мне очень интересная и довольно непростая тема.
@stivandpolli9117 3 жыл бұрын
Хороший урок. Спасибо.
@andriikuzmichov4022 6 жыл бұрын
Круто, очень хочу увидеть анимации для этих кнопок
@pavelivanov3590 4 жыл бұрын
Ты лучший!!
@victoria.serbichenko 6 жыл бұрын
Спасибо!)) Классный урок) Интересно, как можно это можно круче реализовать.
@spadar1602 5 жыл бұрын
Какая годнотеееень
@adventure229 4 жыл бұрын
очень полезное видео👍
@user-hs7ye2lr7x 6 жыл бұрын
классный урок!
@alexkindra19 4 жыл бұрын
благодарю, сильно помог
@user-tg1ge6oi2v 4 жыл бұрын
Помог , СПАСИБО!
@asgart_vocal 6 жыл бұрын
Не мало важный момент, для тех кто не знает. Просто так в name будет передано одно значение. Что бы php воспринимал все переданные значения checkbox необходимо писать так: name="food[]" Тогда будет передан массив значений, который уже на php разбирается и обрабатывается. В противном случае в name="food" будет всего лишь одно значение.
@alexg0490 4 жыл бұрын
Спасибо помог!
@japananimetime 6 жыл бұрын
Спасибо!
@JavaScriptcher 3 жыл бұрын
Благодарю!!!!
@farm_planets 4 жыл бұрын
Спасибо)
@user-gf2bj8jv2t 6 жыл бұрын
Очень полезно и главное доступным языком. Можно ли какую-нибудь фичу про анимацию!!!
@hereticmaggot9833 6 жыл бұрын
Артём, очень интересная подача материала, хотелось бы увидеть слайдер, который бы менял картинку и цвет фона (на радиокнопках)
@3dzbot 5 жыл бұрын
idangero.us/swiper/
@sonterix 6 жыл бұрын
Почему у тебя постоянно разный фон?)) Спасибо за урок, интересно как это круче анимировать. Вообще очень интересна тема css и js анимаций на реальных примерах!
@semeteyboronbaev6184 2 жыл бұрын
Уважаю тебя лысый из Браузер
@dmitry6424 5 жыл бұрын
спасибо
@user-tr8mn1bx9d 6 жыл бұрын
Мне нужно больше анимации!!!)
@arengevorgyan2088 4 жыл бұрын
a yesli u minya mnog ov?,no ya xachu chto bli tok checkbox?
@ogurcik_01 6 жыл бұрын
про select пожалуйста!
@magzhanamangeldiuly8221 6 жыл бұрын
А можно ли сделать стиль от Material Design на компоненты, а именно эффект волны (ripple).
@Александр-Беляев 6 жыл бұрын
Урок крутетский! Лайк Но блин музыка приелась пипец, миллион видосов на KZfaq с этой бесплатной музыкой (( По пробую найти сайт, где нейросеть пишет музыку, и её можно использовать на KZfaq, как свою.
@woodzimierz9621 5 жыл бұрын
Отлично! Где можно глянуть возможные операторы кроме плюса? Я понимаю что в спецификации, но там сотни страниц. Можно конкретную ссылку?
@e1jo 6 жыл бұрын
По формам больше б выпусков. Там очень много чего есть я думаю что показать.
@user-ev4vh8cm2x Жыл бұрын
Круто, очень мало видео которые доносят суть как это работает.
@verginiabools2563 6 жыл бұрын
Артём, можешь пожалуйста по-подробнее рассказать про flex-элементы, пожалуйста.
@user-vx1fx1nz7z 5 жыл бұрын
Сними про стилизацию selecta вместе с css и js как положенно
@alexandrstelmakh73 6 жыл бұрын
Привет! Запиши урок о привязке к скроллу (scroll-snap)
@konovaalovv5386 6 жыл бұрын
Знаю что не по теме но... Можешь записать видео, про слепую печать на клавиатуре. Пожалуйста, будет очень интересно послушать.
@FishkiWebflow 6 жыл бұрын
Спасибо за урок. Есть вопрос.. а как сделать так, что бы из нескольких радио баттон был один уже отмечен.(выбран) ?
@fdskaasdyt 6 жыл бұрын
webref.ru/html/input/checked
@urushadze 6 жыл бұрын
Сними о том как загружать фото на сайте быстрее
@denisborisov4749 6 жыл бұрын
Форма обратной связи
@mikolaiprakunin5689 6 жыл бұрын
Почему ты не использовал псевдокласс "after"?
@arturk2363 6 жыл бұрын
Нада делать четко з галочкой!
@thesijisgame6590 6 жыл бұрын
Сделай выпуск где будет скролинг по блокам сайта. чтоб блоки были в размер всего экрана и скролились не обычно а по блокам. Буду признателен.
@denisborisov4749 6 жыл бұрын
1000 лет жду
@user-yd1di2gn9y 6 жыл бұрын
codepen.io/anon/pen/jKvXWe (Чтобы не происходило случайного выделения текста при клике на вариант, можно добавить ::selection { background: transparent; })
@Alexey_Gri 6 жыл бұрын
+
@FeranDAq 6 жыл бұрын
осталось добавить что инпут чекбокс хоть и выключен, но несет функциональную нагрузку. Т. Ё. будет отправлять на сервер данные что элемент выбран в случае чего
@maruf4ik 6 жыл бұрын
как стилизовать input type search
@KrZn104 5 жыл бұрын
Артём, спасибо! Доступно объясняешь! Из этого видео я понял, что из чекбокса можно сделать даже навигационное меню. То есть, ИКОНКА ГАМБУРГЕРА - справа слово МЕНЮ. А можно сделать так что, при клике раскрывалось меню (Главная О компании и т.д), сам ГАМБУРГЕР становился КРЕСТИКОМ, как ты показывал в одном из видео, а слово МЕНЮ превращалось в слово ЗАКРЫТЬ и наоборот? Буду рад увидеть эту фичу, Спасибо!
@user-sz8tl8cb5v 6 жыл бұрын
Хороший урок, а как стилизовать ?
@lexusgt 6 жыл бұрын
+1 за select
@AlexDanilenko 6 жыл бұрын
Поддерживаю! )
@fadeev6451 6 жыл бұрын
верстать самому их как список в блоке, + js
@AlexDanilenko 6 жыл бұрын
А будет ли информация из списка передаваться в форму?
@san88k 5 жыл бұрын
это такой себе подход. на десктопе все будет красиво. но, например, на айфоне, такой блок уже не будет определяться как селект, не будет появляться кинетическое колесо с прокруткой оптионов и тд. короч, сам внешний селект более-менее стилизуется, а внутренности очень хреново, а подмена его на див+ жс хреново работает на мобилах.
@j3tyyl1nk19 6 жыл бұрын
Артем можешь пожалуйста записать урок по паралакс-эффекту)
@Glo_Academy 6 жыл бұрын
Записал. Скоро выложу)
@j3tyyl1nk19 6 жыл бұрын
Glo Academy спасибо большое
@Utamatamakin 4 жыл бұрын
Прикольно, благодарю за урок А как делается стилизация самих стрелок(галочек, птичек). Как стилизовать checkbox arrow? Если кто владеет информацией, поделитесь.
@user-vo7sm5sz7p 4 жыл бұрын
через :after
@Utamatamakin 4 жыл бұрын
@@user-vo7sm5sz7p не, я о том как саму стрелку стилизовать. К примеру там хвост длиннее и закруглен, начало толще, Как вообще это все делать?
@user-vo7sm5sz7p 4 жыл бұрын
@@Utamatamakin примитивные галочки делаются через after, а если нужно что-то посложнее, то делать как Артём в видео показывает, вставлять фоном картинку или иконку
@mishatrick 6 жыл бұрын
Хотелось бы увидеть, как запретить отправку формы если на чекбоксе не стоит галочка и соответственно всплывал текст, о том, что нужно поставить галочку. Спасибо за видео, полезно
@max_samusevich 6 жыл бұрын
Misha Trick можно в инпут с чекбоксом добавить атрибут required, а всплывашку реализовать через условие джаваскрипта
@sergey1727 4 жыл бұрын
как сделать без label?
@Александр-Беляев 6 жыл бұрын
Вот, нашёл ссылку где нейросеть пишет бесплатную музыку www.jukedeck.com/
@wasiliyiprodan7787 3 жыл бұрын
Почему не можно было использовать псевдоклассы ?
@_oxios_ 6 жыл бұрын
Тема : прелодер
@user-mf5wi8cc9g 3 жыл бұрын
галочка не появляется после вставки пути
@vladyslavvin 6 жыл бұрын
Данный способ немного устарел, кого не беспокоят динозавры, рекомендую к input appearance: none; дальше стилизуйте как душе угодно.
@DevBer 6 жыл бұрын
Vladislav Magdenko можно поподробнее? =)
@raloynner9385 6 жыл бұрын
когда input.checkbox ( display: none) проблем разве не будет при отправки формы ?
@hereticmaggot9833 6 жыл бұрын
rus Madison можно юзать класс visually-hidden))
@raloynner9385 6 жыл бұрын
ты хотел сказать стили наверно ) но там всеравно пару пикселей будет в потоке
@hereticmaggot9833 6 жыл бұрын
rus Madison нет, нет будет, загугли этот класс и почитай что там к чему
@deanArtDev 5 жыл бұрын
Что за уличная магия у меня, первый input скопировал и вставил фича с кликом по слову работает, следующий прописал руками аналогично он не пашет. Руки крюки это понятно, но, все же подскажите в чем может быть косяк. codepen.io/Sitho333/pen/yxypLr В sublime text 3 такая же ерунда.
@user-gc1id9zt9x 5 жыл бұрын
в теге «label» ошибка
@deanArtDev 5 жыл бұрын
Спасибо)
@denisborisov4749 6 жыл бұрын
Модальное окно
BalcevMMA_BOXING
Рет қаралды 19 МЛН
Action C Mini
Рет қаралды 79 МЛН
Просто: разработка
Рет қаралды 42 М.
ВебКадеми | Юрий Ключевский
Рет қаралды 11 М.
Glo Academy
Рет қаралды 54 М.
SHADKO
Рет қаралды 16 МЛН
Влад Закроев
Рет қаралды 4,8 МЛН