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