Стилизация Checkbox и Radio Button. Как изменить checkbox css. Стилизация radio css

[@prosto_razrabotka]

Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/

[@coconut_punker]

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

[@ЭдуардЛутков]

Очень полезное видео, не знал что селекторы с псевдоэлементами можно скрещивать между собой. Не зря я сюда зашел.

[@dilijonjonson6183]

Спасибо вам за ценный урок! Как раз сейчас эту тему прохожу.

[@alinafitisova3176]

Виталий , мало того что Вы теска моего папы, так еще и объясняете как Бог преподавания ! Я восхищаюсь Вами!! Спасибо большое за Ваши уроки !

[@DxnSlow]

Прошло 3 года после этого коммента, вы чего-то добились в этой сфере или я трачу время в пустую?

[@alinafitisova3176]

@@DxnSlow я работаю web development and support coordinator в муниципалитете в Канаде, провинция Онтарио , думаю что да 😜

[@DxnSlow]

@@alinafitisova3176 почувствовал облегчение спасибо

[@mefioz2397]

Отлично, я рад что нашёл данное видео, действительно все просто как 2х2. Спасибо

[@АнатолийК-щ2ъ]

Уже хотел разбивать клавиатуру, но наткнулся на видео, спасибо большое, всё просто)))

[@АнатолийК-щ2ъ]

Уже минут 5 кликаю на чекбокс, никак не нарадуюсь, что всё работает, как необходимо)

[@2004-q1h]

:з обожаю смотреть ваши видео, невольно заряжаюсь позитивом и стремлением дальше учиться и развиваться в вебе. Спасибо за то, что вы есть!

[@СергейАндрейко-ч3ш]

Очень выручило видео, я как начинающий всё прекрасно понял и это даже проще чем подключать библиотеки js и писать лишние скрипты.

[@ЕкатеринаФоад]

Спасибо, очень круто! и ведь действительно) И оно работает!)

[@toxyflog670]

Спасибо за хорошое и простое объяснение с практичным примером

[@ytuser9248]

Спасибо большое, показали и объяснили все четко!

[@olegkravchenko9655]

Позитивный чел :) Фишки - это хорошо. Даже так - это очень хорошо! Больше фишек народу! :D

[@kos_tik_lkm]

Супер! то что надо было, спс!!!

[@DanReksar]

Блин, я все ждал когда ты лейбл посередине чекьокса выравнивать будешь по высоте. А то если чекбокс большой, то лейбл прибитый к полу

[@nataliyabardtinova4648]

Благодарю👍супер видео!

[@designmyself]

Очень просто и понятно,спасибо за вот такие видосы.👍👍👍

[@prosto_razrabotka]

Спасибо

[@ИгорьГорбунов-ю9ж]

Благодарю за видео.

[@Дима-п5в4ж]

Отличный видос!! Так держать Виталий!! Еще бы видео о стилизации input type='file' и select было бы супер

[@sergeykryzhnyy8799]

Спасибо добрый человек )))

[@ИгорьБатькович-ы9з]

Красота!

[@glebf1854]

Спасибо огромное! Сильно помог!

[@АлексейТараканов-е5м]

Виталий, я хочу дополнить еще кое-что, если таким образом оставить, как вы сделали, то при атрибуте required у input, при отправке формы, не сработает всплывающая подсказка на счет обязательного поля, надо input:checkbox или input:radio задавать не display: none; , а position: absolute; opacity: 0; . Ну и родителю соответственно position: relative, и при таком раскладе уже все будет работать как надо.

[@braivs]

Спасибо, сейчас пригодилось, что написал)

[@const-shish]

Виталий, спасибо большое!!!

[@prosto_razrabotka]

Обращайтесь -)

[@asankhalilov6159]

Спасибо!!! Очень познавательно и просто сделано!

[@seoonlyRU]

просто и понятно) ну и лайк с ходу от СЕООНЛИ

[@Elisha_GG]

Мужик, возвращайся. Подписан на тебя с момента интервью у айтибороды

[@Elisha_GG]

Кстати, Виталя, не советую в проде юзать такой паттерн как скрытие подобных интерактивных элементов как чекбокс дисплеем. Ибо они должны быть видны хотя бы для скринридера. Вроде это важно.

[@Roman197634]

Отличное видео. Все супер ясно. Хотел попросить еще сделать видео про кастомные селекты. У меня возникли определённые проблемы при замене галочки на кастомную и список выпадал по алфавиту, а надо было как HTML очередность. Плюс текст выбора начальный в самом окне еще раз дублировался в списке.

[@jastinmakalister637]

почему-то у этого чувачка я понял! благодарю!

[@АлмазФахрутдинов-м9п]

Очень очень и очень крутое видео. Больше видео с крутыми фишками!) Огромное и гигантское человеческое СПАСИБО!

[@АлексейАдаменко-г8н]

Супер крутое видео! Прямо в точку!(зелёную)

[@FilmicFil]

Спасибо вам большое. Отличный канал!

[@ИльяА-у4ф]

Спасибо друг. Видос огонь.

[@Konstsin]

Круто , спасибо!

[@frusya-freak]

Это магия! 🤩

[@prosto_razrabotka]

Плюс минус -)

[@unknownhobo4791]

Спасибо!

[@pstri4ka567]

Спасибо за видео!

[@serhiip5206]

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

[@kobamikutishvili6606]

Супер!

[@tonit2237]

Спасибо за труд) Продолжай и дальше) Очень полезный контент) Пи.си: Сделай большой видос про CSS анимацию

[@maltamagistro]

6:45 - а что это за синтаксис в селекторе со знаком плюс "+". Не очень понимаю, как это работает

[@SadBatya]

7:15 а как сделать так, чтобы и при клике на квадрат все работало?

[@kostamokry2172]

Крутой контент, врядли бы нашел тебя если бы не смотрел Itбороду) Like + subscribe

[@ЕвгенийПетров-и4в2р]

transform: translate(-50%,-50%); - лайк, подписка, колокольчик!!!

[@fmleglrmglrml]

??? лол

[@Shassdooit]

а как вы сделаете фокус на чекбоксе,если выключаете его с помощью display none?

[@maltamagistro]

почему fake::before появился внутри спана, а не "перед" ним, то есть наружи?

[@NeoJohnSmit]

Пушка)

[@somwho_somewhere]

жирный лайкос! Кто тут от айти-Бороды?)

[@senseilucky3438]

как сделать чтобы списки при нажатии появлялись и исчезали. не при наведении как ховер эффект, а именно при нажатии

[@kos1239]

Здравствуйте,очень интересный урок. А вы можите на плане квартиры(или комнаты) расставить элементы от чекбоксов, а кнопки CSS с состоянием дублирующим от них в другом блоке Желательно около 4-6 кнопок,заранее благодарю вас,спосибо за понимание. Принцип такой,чтоб на плане отображались флажки или лампочки и с этим состоянием в другом блоке подсвечивалась кнопка и при этом соблюдалась масштабирование.

[@BeeRealLikeMe]

Классный чувак ))

[@DarthVauban]

Сделал первый раз по этому видео и все было ок. Потом решил сделать еще раз и вернулся к видео, чтобы на всякий случай ничего не упустить. Второй раз ничего не работает, хотя даже для наглядности переписал код 1 в 1

[@adil88201]

merci

[@BIO_Concept]

можно такой же лайвхак по SELECT

[@googoogle]

display: none на чекбокс не работает. opacity 1 работает. в общем разобрался с ним таким образом: transform: translate(-100%);

[@mrs2251]

А как сделать чтоб кликать именно на сам чекбокс?

[@AnatoliySharov]

Т.е. тот checkbox который скрытый он всё равно отрабатывает, а визуализируется другой? Правильно ли я понимаю?

[@prosto_razrabotka]

Да

[@alexmax8977]

я тоже не могу понять это

[@alexmax8977]

как отправит форма значение чекбокса не пробовал но думаю сработает по тому что при отметке на контент скрыто отмечается так все гениально продумано

[@artems3566]

Скажи, пожалуйста, а что ты думаешь с точки зрения семантики про следующий способ: Внутри пустого span class="fake" написать текст "checkbox/radio", сделать высоту шрифта 0 и прозрачный цвет текста. (Остальное, как в первом варианте объяснения)

[@prosto_razrabotka]

Плюсов в этом я никаких не вижу. Это лишний грязный код/текст.

[@artems3566]

@@prosto_razrabotka Спасибо :)

[@mikhailivlev]

​@@prosto_razrabotka стараюсь так тоже не делать, но такой пример использую для бургера, в спане пишу слово бургер и фонт-сайз: 0; =) когда то давно его написал, а теперь тупо копипаста из проекта в проект=) если есть на твой взгляд лучшее решение, то пили видосик, думаю многим зайдет=)

[@codernd]

7:19 самое лаконичное высказывание :D

[@sergey1727]

как кастомизировать сам checbox а не label ?

[@tamirlanomarov2500]

у меня не работает кнопка с checked((

[@Test_id]

Добрый день! всё в точности повторил, но не работает! Удалил код и повторил снова - не работает! Я по чекбокс с псевдоэлементом.

[@alexmax8977]

только я не понял как отправиться на сервер отмечен или не отмечен checkbox на самом же POST методе

[@fmleglrmglrml]

мы же все в форму запихнем, а при отправке формы она считает заначение которое по факту внутри бокса стоит

[@Zabiyaka1978]

Способ хороший, безусловно, и даже кроссбраузерный, но.. Это не стилизация, а подмена...... Хотя, безусловно, применение этого способа гораздо практичнее применения JS.

[@Zabiyaka1978]

@@prosto_razrabotka На практике - да, но по сути нет...

[@Jake-vorobei]

Я тебе за этот видос хочу пиво поставить

[@read_and_listen]

Вся эта стилизация radiobutton через CSS никуда не годится. При масштабировании экрана псевдоэлемент плющится и съезжает с центра

[@valdesknight]

сложна сложна, не ждал увидеть scss

[@dmitrelu3]

Зачем дисплей нон, это безграмотно.