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

Приветствую. Сегодня мы будем разбираться, как делается стилизация Checkbox и стилизация radio css. это такие галочки и кружочки на страницу Подробно покажу как изменить checkbox css и сделать из этого красивый checkbox css. Разберем стили checkbox css. и на практике будем изменить стиль checkbox. Думаю для вас очевидно, что существуют разные checkbox стили. и разберем radio css оформление

Пікірлер: 89

  • @prosto_razrabotka
    @prosto_razrabotka3 жыл бұрын

    Не забудьте заглянуть сюда: ❓ Запись на консультацию - 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/

  • @user-bi4vn3bs3l
    @user-bi4vn3bs3l4 жыл бұрын

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

  • @user-cd3sl2si4z
    @user-cd3sl2si4z3 жыл бұрын

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

  • @toxyflog670
    @toxyflog6704 жыл бұрын

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

  • @alinafitisova3176
    @alinafitisova31763 жыл бұрын

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

  • @DxnSlow

    @DxnSlow

    5 ай бұрын

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

  • @alinafitisova3176

    @alinafitisova3176

    5 ай бұрын

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

  • @DxnSlow

    @DxnSlow

    5 ай бұрын

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

  • @coconut_punker
    @coconut_punker4 жыл бұрын

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

  • @sergeykryzhnyy8799
    @sergeykryzhnyy879911 ай бұрын

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

  • @DanReksar
    @DanReksar4 жыл бұрын

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

  • @mefioz2397
    @mefioz23972 жыл бұрын

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

  • @asankhalilov6159
    @asankhalilov61593 жыл бұрын

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

  • @olegkravchenko9655
    @olegkravchenko96555 жыл бұрын

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

  • @user-ev4vh8cm2x
    @user-ev4vh8cm2x Жыл бұрын

    Красота!

  • @user-pn2ev2je2l
    @user-pn2ev2je2l4 жыл бұрын

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

  • @FilmicFil
    @FilmicFil4 жыл бұрын

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

  • @ytuser9248
    @ytuser92482 жыл бұрын

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

  • @nataliyabardtinova4648
    @nataliyabardtinova4648 Жыл бұрын

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

  • @kos_tik_lkm
    @kos_tik_lkm Жыл бұрын

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

  • @pstri4ka567
    @pstri4ka5673 жыл бұрын

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

  • @user-nm8zk4hn4q
    @user-nm8zk4hn4q3 жыл бұрын

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

  • @tonit2237
    @tonit22374 жыл бұрын

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

  • @user-mj5mk6il5q
    @user-mj5mk6il5q3 жыл бұрын

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

  • @glebf1854
    @glebf1854 Жыл бұрын

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

  • @user-fv1qs6ur2h
    @user-fv1qs6ur2h3 жыл бұрын

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

  • @user-ij4sk6it1u
    @user-ij4sk6it1u4 жыл бұрын

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

  • @designmyself
    @designmyself3 жыл бұрын

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

  • @prosto_razrabotka

    @prosto_razrabotka

    3 жыл бұрын

    Спасибо

  • @Konstsin
    @Konstsin3 жыл бұрын

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

  • @Roman197634
    @Roman1976342 жыл бұрын

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

  • @const-shish
    @const-shish4 жыл бұрын

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

  • @prosto_razrabotka

    @prosto_razrabotka

    4 жыл бұрын

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

  • @user-bm8hk6qf9j
    @user-bm8hk6qf9j Жыл бұрын

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

  • @kobamikutishvili6606
    @kobamikutishvili66063 жыл бұрын

    Супер!

  • @unknownhobo4791
    @unknownhobo47912 жыл бұрын

    Спасибо!

  • @jastinmakalister637
    @jastinmakalister6376 ай бұрын

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

  • @user-sx2jx4gk1f
    @user-sx2jx4gk1f4 жыл бұрын

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

  • @braivs

    @braivs

    3 жыл бұрын

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

  • @seoonlyRU
    @seoonlyRU2 жыл бұрын

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

  • @user-px6bc6wu3c
    @user-px6bc6wu3c2 жыл бұрын

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

  • @user-px6bc6wu3c

    @user-px6bc6wu3c

    2 жыл бұрын

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

  • @user-ky9bh9zr3c
    @user-ky9bh9zr3c2 жыл бұрын

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

  • @BeeRealLikeMe
    @BeeRealLikeMe3 жыл бұрын

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

  • @frusya-freak
    @frusya-freak4 жыл бұрын

    Это магия! 🤩

  • @prosto_razrabotka

    @prosto_razrabotka

    4 жыл бұрын

    Плюс минус -)

  • @NeoJohnSmit
    @NeoJohnSmit3 жыл бұрын

    Пушка)

  • @serhiip5206
    @serhiip52062 жыл бұрын

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

  • @kostamokry2172
    @kostamokry21724 жыл бұрын

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

  • @adil88201
    @adil882012 жыл бұрын

    merci

  • @Elisha_GG
    @Elisha_GG9 ай бұрын

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

  • @Elisha_GG

    @Elisha_GG

    9 ай бұрын

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

  • @DarthVauban
    @DarthVauban2 жыл бұрын

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

  • @user-cj7if7us8u
    @user-cj7if7us8u4 жыл бұрын

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

  • @fmleglrmglrml

    @fmleglrmglrml

    4 жыл бұрын

    ??? лол

  • @alexdomanskyi7301
    @alexdomanskyi73014 жыл бұрын

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

  • @kos1239
    @kos12392 жыл бұрын

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

  • @artems3566
    @artems35665 жыл бұрын

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

  • @prosto_razrabotka

    @prosto_razrabotka

    5 жыл бұрын

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

  • @artems3566

    @artems3566

    5 жыл бұрын

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

  • @mikhailivlev

    @mikhailivlev

    4 жыл бұрын

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

  • @Shassdooit
    @Shassdooit Жыл бұрын

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

  • @BIO_Concept
    @BIO_Concept Жыл бұрын

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

  • @codernd
    @codernd4 жыл бұрын

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

  • @maltamagistro
    @maltamagistro Жыл бұрын

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

  • @senseilucky3438
    @senseilucky343810 ай бұрын

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

  • @AnatoliySharov
    @AnatoliySharov5 жыл бұрын

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

  • @prosto_razrabotka

    @prosto_razrabotka

    5 жыл бұрын

    Да

  • @alexmax8977

    @alexmax8977

    4 жыл бұрын

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

  • @alexmax8977

    @alexmax8977

    4 жыл бұрын

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

  • @Jake-vorobei
    @Jake-vorobei4 жыл бұрын

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

  • @mrs2251
    @mrs2251 Жыл бұрын

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

  • @googoogle
    @googoogle2 жыл бұрын

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

  • @maltamagistro
    @maltamagistro Жыл бұрын

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

  • @SadBatya
    @SadBatya Жыл бұрын

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

  • @alexmax8977
    @alexmax89774 жыл бұрын

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

  • @fmleglrmglrml

    @fmleglrmglrml

    4 жыл бұрын

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

  • @sergey1727
    @sergey17274 жыл бұрын

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

  • @Zabiyaka1978
    @Zabiyaka19785 жыл бұрын

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

  • @Zabiyaka1978

    @Zabiyaka1978

    5 жыл бұрын

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

  • @tamirlanomarov2500
    @tamirlanomarov25004 жыл бұрын

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

  • @Test_id
    @Test_id2 жыл бұрын

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

  • @valdesknight
    @valdesknight3 жыл бұрын

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

  • @read_and_listen
    @read_and_listen3 жыл бұрын

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

  • @dmitrelu3
    @dmitrelu33 жыл бұрын

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

Келесі