Стилизация Checkbox и Radio Button. Как изменить checkbox css. Стилизация radio css
Вставка
- Опубліковано 25 вер 2024
- Приветствую. Сегодня мы будем разбираться, как делается стилизация Checkbox и стилизация radio css. это такие галочки и кружочки на страницу Подробно покажу как изменить checkbox css и сделать из этого красивый checkbox css. Разберем стили checkbox css. и на практике будем изменить стиль checkbox. Думаю для вас очевидно, что существуют разные checkbox стили. и разберем radio css оформление
Не забудьте заглянуть сюда:
❓ Запись на консультацию - 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/
Очень полезное видео, не знал что селекторы с псевдоэлементами можно скрещивать между собой. Не зря я сюда зашел.
Виталий , мало того что Вы теска моего папы, так еще и объясняете как Бог преподавания ! Я восхищаюсь Вами!!
Спасибо большое за Ваши уроки !
Прошло 3 года после этого коммента, вы чего-то добились в этой сфере или я трачу время в пустую?
@@DxnSlow я работаю web development and support coordinator в муниципалитете в Канаде, провинция Онтарио , думаю что да 😜
@@alinafitisova3176 почувствовал облегчение спасибо
Сначала канал не оч понравился, но за одну только эту штуку жму руку автору. Я был на пути е*ли с библиотеками по этой теме, но ты меня спас. Полезно, помогло решить много проблем. Спасибо
Отлично, я рад что нашёл данное видео, действительно все просто как 2х2.
Спасибо
Спасибо добрый человек )))
:з обожаю смотреть ваши видео, невольно заряжаюсь позитивом и стремлением дальше учиться и развиваться в вебе. Спасибо за то, что вы есть!
Позитивный чел :)
Фишки - это хорошо. Даже так - это очень хорошо! Больше фишек народу! :D
Блин, я все ждал когда ты лейбл посередине чекьокса выравнивать будешь по высоте. А то если чекбокс большой, то лейбл прибитый к полу
Спасибо за хорошое и простое объяснение с практичным примером
Виталий, я хочу дополнить еще кое-что, если таким образом оставить, как вы сделали, то при атрибуте required у input, при отправке формы, не сработает всплывающая подсказка на счет обязательного поля, надо input:checkbox или input:radio задавать не display: none; , а position: absolute; opacity: 0; . Ну и родителю соответственно position: relative, и при таком раскладе уже все будет работать как надо.
Спасибо, сейчас пригодилось, что написал)
Красота!
Очень выручило видео, я как начинающий всё прекрасно понял и это даже проще чем подключать библиотеки js и писать лишние скрипты.
Спасибо большое, показали и объяснили все четко!
почему-то у этого чувачка я понял! благодарю!
Уже хотел разбивать клавиатуру, но наткнулся на видео, спасибо большое, всё просто)))
Уже минут 5 кликаю на чекбокс, никак не нарадуюсь, что всё работает, как необходимо)
Очень просто и понятно,спасибо за вот такие видосы.👍👍👍
Спасибо
Благодарю за видео.
Отличное видео. Все супер ясно. Хотел попросить еще сделать видео про кастомные селекты. У меня возникли определённые проблемы при замене галочки на кастомную и список выпадал по алфавиту, а надо было как HTML очередность. Плюс текст выбора начальный в самом окне еще раз дублировался в списке.
Благодарю👍супер видео!
Отличный видос!! Так держать Виталий!! Еще бы видео о стилизации input type='file' и select было бы супер
Спасибо, очень круто! и ведь действительно) И оно работает!)
Спасибо!!!
Очень познавательно и просто сделано!
Супер! то что надо было, спс!!!
Виталий, спасибо большое!!!
Обращайтесь -)
просто и понятно) ну и лайк с ходу от СЕООНЛИ
Очень очень и очень крутое видео. Больше видео с крутыми фишками!) Огромное и гигантское человеческое СПАСИБО!
Спасибо огромное! Сильно помог!
Спасибо вам большое. Отличный канал!
Супер крутое видео! Прямо в точку!(зелёную)
это работает только с текстом, если по самому чекбоксу(созданному самому) кликаешь этот вариант не работает.
Так что вариант не совсем коректный, многим не нужен лейбл возле чекбокса
Спасибо за труд) Продолжай и дальше) Очень полезный контент)
Пи.си: Сделай большой видос про CSS анимацию
Спасибо друг. Видос огонь.
Супер!
Спасибо!
Круто , спасибо!
Спасибо за видео!
merci
transform: translate(-50%,-50%); - лайк, подписка, колокольчик!!!
??? лол
Крутой контент, врядли бы нашел тебя если бы не смотрел Itбороду) Like + subscribe
Это магия! 🤩
Плюс минус -)
Сделал первый раз по этому видео и все было ок. Потом решил сделать еще раз и вернулся к видео, чтобы на всякий случай ничего не упустить. Второй раз ничего не работает, хотя даже для наглядности переписал код 1 в 1
Мужик, возвращайся. Подписан на тебя с момента интервью у айтибороды
Кстати, Виталя, не советую в проде юзать такой паттерн как скрытие подобных интерактивных элементов как чекбокс дисплеем. Ибо они должны быть видны хотя бы для скринридера. Вроде это важно.
Спасибо вам за ценный урок!
Как раз сейчас эту тему прохожу.
Пушка)
Классный чувак ))
Здравствуйте,очень интересный урок. А вы можите на плане квартиры(или комнаты) расставить элементы от чекбоксов, а кнопки CSS с состоянием дублирующим от них в другом блоке Желательно около 4-6 кнопок,заранее благодарю вас,спосибо за понимание. Принцип такой,чтоб на плане отображались флажки или лампочки и с этим состоянием в другом блоке подсвечивалась кнопка и при этом соблюдалась масштабирование.
почему fake::before появился внутри спана, а не "перед" ним, то есть наружи?
а как вы сделаете фокус на чекбоксе,если выключаете его с помощью display none?
жирный лайкос! Кто тут от айти-Бороды?)
как сделать чтобы списки при нажатии появлялись и исчезали. не при наведении как ховер эффект, а именно при нажатии
6:45 - а что это за синтаксис в селекторе со знаком плюс "+". Не очень понимаю, как это работает
можно такой же лайвхак по SELECT
7:19 самое лаконичное высказывание :D
7:15 а как сделать так, чтобы и при клике на квадрат все работало?
display: none на чекбокс не работает. opacity 1 работает. в общем разобрался с ним таким образом: transform: translate(-100%);
А как сделать чтоб кликать именно на сам чекбокс?
Т.е. тот checkbox который скрытый он всё равно отрабатывает, а визуализируется другой? Правильно ли я понимаю?
Да
я тоже не могу понять это
как отправит форма значение чекбокса не пробовал но думаю сработает по тому что при отметке на контент скрыто отмечается так все гениально продумано
Добрый день! всё в точности повторил, но не работает! Удалил код и повторил снова - не работает! Я по чекбокс с псевдоэлементом.
Скажи, пожалуйста, а что ты думаешь с точки зрения семантики про следующий способ:
Внутри пустого span class="fake" написать текст "checkbox/radio", сделать высоту шрифта 0 и прозрачный цвет текста. (Остальное, как в первом варианте объяснения)
Плюсов в этом я никаких не вижу. Это лишний грязный код/текст.
@@prosto_razrabotka Спасибо :)
@@prosto_razrabotka стараюсь так тоже не делать, но такой пример использую для бургера, в спане пишу слово бургер и фонт-сайз: 0; =) когда то давно его написал, а теперь тупо копипаста из проекта в проект=) если есть на твой взгляд лучшее решение, то пили видосик, думаю многим зайдет=)
как кастомизировать сам checbox а не label ?
у меня не работает кнопка с checked((
Способ хороший, безусловно, и даже кроссбраузерный, но.. Это не стилизация, а подмена...... Хотя, безусловно, применение этого способа гораздо практичнее применения JS.
@@prosto_razrabotka На практике - да, но по сути нет...
только я не понял как отправиться на сервер отмечен или не отмечен checkbox
на самом же POST методе
мы же все в форму запихнем, а при отправке формы она считает заначение которое по факту внутри бокса стоит
Я тебе за этот видос хочу пиво поставить
сложна сложна, не ждал увидеть scss
Вся эта стилизация radiobutton через CSS никуда не годится. При масштабировании экрана псевдоэлемент плющится и съезжает с центра
Зачем дисплей нон, это безграмотно.