Чекбокс в виде переключателя (Switch toggle) HTML + CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 พ.ย. 2024

ความคิดเห็น • 46

  • @andreypavlukov1192
    @andreypavlukov1192 ปีที่แล้ว +3

    До слез просто Александр😂
    Цитата из проверки от тебя моего итогового проекта:
    «aria label помним,да,помним …. я вот помню про aria label!»
    🤣🤣🤣

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว +1

      Да да ))) Но иногда я забываю :)

  • @megabulk
    @megabulk ปีที่แล้ว +2

    Спасибо большое! Очень интересное и полезное видео. Думаю, буду возвращаться к нему и пересматривать еще не оду сотню раз.

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Очень рад, что удалось разобрать полезную тему. Такие чекбоксы встречаются довольно часты. Думаю тема будет полезной :)

  • @76725
    @76725 ปีที่แล้ว +2

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

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо вам за ваш комментарий :)

  • @СтаниславГорячев-г1ъ
    @СтаниславГорячев-г1ъ ปีที่แล้ว +2

    На днях как раз хотел освежить чекбоксы и тут вы дропаете видос 👍 спасибо

  • @timkri0
    @timkri0 ปีที่แล้ว +2

    Большое спасибо Александр , очень понятное и легкое для восприятия видео !
    Как всегда, нас радуете !

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо вам за регулярную поддержку :) Очень рад, что есть такие замечательные зрители, как вы :)

  • @sashadev86
    @sashadev86 ปีที่แล้ว +2

    Александр, Вы молодец!!! Классная подача материала, всё чётко и понятно!!! Спасибо Вам!!! 👍👍👍

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว +1

      Спасибо за отклик :) Будем делать подачу лучше и работать в том же духе :)

  • @relaxdeepsleepmusic3608
    @relaxdeepsleepmusic3608 11 หลายเดือนก่อน +1

    Спасибо Александр за видео.

    • @alex_dudukalo
      @alex_dudukalo  11 หลายเดือนก่อน

      Спасибо большое за Ваш комментарий 🤗 надеюсь и другие видео канала будут вам полезны

  • @СергейОсадчий-и5е
    @СергейОсадчий-и5е ปีที่แล้ว +2

    🙃 Спасибо ! 👍😀 все очень понятно, круто!!!

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо вам, рад, что ролик вам понравился)

  • @СергейВиноградов-с2т
    @СергейВиноградов-с2т ปีที่แล้ว +3

    Спасибо за работу! Было бы клево увидеть на канале курс по фреймворку js

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว +1

      Спасибо за комментарий :) Да, думаю сделать отдельный плейлист с роликами по Vue :)

  • @andreyfedyukin8360
    @andreyfedyukin8360 ปีที่แล้ว +1

    Спасибо 👍
    С Новым годом! 🎄🥳🎉

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Большое спасибо. Поздравляю вас с наступившим Новым Годом :)

  • @ShuxriddinSolixov
    @ShuxriddinSolixov ปีที่แล้ว +1

    Просто БОМБА 👏👏

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Большое спасибо! 😊

  • @HAVALSKI
    @HAVALSKI ปีที่แล้ว +1

    С Новым годом вас, Александр!
    В Новый год и уже с новым видео 😊
    Спасибо, было интересно, чек боксы очень часто используются)

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо за поздравление. Так. же взаимно поздравляю вас с наступившим Новым годом :) Да да, сразу за работу - за любимое дело. Давно планировал записать такой ролик

  • @NuriddinChoriev-i2u
    @NuriddinChoriev-i2u 4 หลายเดือนก่อน +1

    Спасибо за видео, оно очень полезно

  • @КонстантинХамилов
    @КонстантинХамилов ปีที่แล้ว +1

    Спасибо огромное!
    Сейчас обучаюсь в it-школе специальности fullstack и преподы не всё рассказывают. Приходится процентов 40 самому искать, учить и делать. Одно из заданий было именно на такой чекбокс.

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо вам за ваш отзыв ) Очень приятно, что ролик вам пригодился )) Надеюсь и другие помогут вам в вашем дальнейшем обучении :)

    • @КонстантинХамилов
      @КонстантинХамилов ปีที่แล้ว

      @@alex_dudukalo хочу детально изучить грид или бутстрап. Сейчас заканчиваем css, но это всё очень сжато. Скоро экзамен , нужно создать сайт на штмл и css. Дальше джаваскрипт.
      Есть материалы по этим темам?

  • @mambetaa3486
    @mambetaa3486 ปีที่แล้ว

    Спасибо Александр!!
    Жду видео про методолгию бэм и про афтер и бефор!!:) Спасибо учитель

  • @gorodiskiy4
    @gorodiskiy4 ปีที่แล้ว +1

    Если инпут лежит внутри label ему не обязательно назначать ID, свойственно и для label указывать for

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Да, это так :) Но для чистоты я люблю все же связывать label с текстовым полем :)

  • @Tilda_Practice
    @Tilda_Practice ปีที่แล้ว +1

    Спасибо !!! А когда выйдет обещанный по курс JS для начинающих ???))

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо вам :) Курс - это целая серия роликов ) Хочется, что бы все получилось хорошо. Сейчас над ним работаю. Стараюсь как можно скорее сделать релиз :)

    • @Tilda_Practice
      @Tilda_Practice ปีที่แล้ว

      @@alex_dudukalo Ждем с нетерпением !!!!!!

  • @yukisakurai2079
    @yukisakurai2079 ปีที่แล้ว +1

    Спасибо большое за видео. А как сделать при таком подходе стили чекбоксу disabled checked, чтобы он у нас был чекнутый, но не действительный? Какие-то сложные комбинации селекторов нужно ипользовать? И почему псевдики создаем лейблу, а не инпуту ?

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо вам. Если вы хотите стилизовать состояние disabled именно в чекнутом состоянии, то это можно сделать так: input:checked:disabled. Должно сработать :) Псевдокласс всегда находится внутри элемента. input тег не закрывается :) Внутрь него ничего не поместишь ) Поэтому здесь псевдокласс добавляется родительскому элементу;

  • @triumfator1987
    @triumfator1987 ปีที่แล้ว +1

    хорош. только не понятно зачем инпут в лейбл заворачивать, можно же в начале инпут а потом label. border-radius лучше задавать 50% я думаю, чем в пикселях, так понятнее будет. позиция при активном наверное лучше было не left: 27px а right: -3px

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Спасибо за ваш комментарий. Сделал label оберткой, так как в любой случае этой конструкции нужна обертка. Почему бы ею не сделать label, а внутри span. Хотя конечно можно и наоборот. Да, 50% удобно использовать для квадратного блока, но если пользователь решит сделать ползунок прямоугольным, то блок станет овалом. А при указании скругления в px такой проблемы не будет )
      Если сделать right - 3px, то ползунок улетит в конец текста. Не совсем туда, куда нам бы хотелось :)
      Конечно, есть масса способов сделать такой чекбокс :) Спасибо, что поделились своим видением

  • @megabulk
    @megabulk ปีที่แล้ว +2

    5:32 - наверное, но это не точно)))))))))

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      )))) издержки записи роликов без подготовки

  • @RubenMacakyan
    @RubenMacakyan ปีที่แล้ว

    Что делать если я поменял местоположение перкключателя,и при его активации меня кидает в начало сайта в левый верхний угол

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Скорее всего вы не установили position relative для span :)

  • @КонстантинХамилов
    @КонстантинХамилов ปีที่แล้ว +1

    Что бы скрыть можно вот так сделать visibility: hidden;

    • @alex_dudukalo
      @alex_dudukalo  ปีที่แล้ว

      Да, visibility: hidden скрое элемент ) Спасибо))