Стилизация checkbox, radio, select на CSS

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

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

  • @alexandrberezovskiy6065
    @alexandrberezovskiy6065 4 ปีที่แล้ว +65

    0:00 - Стилизация чекбокса,
    9:39 - Стилизация радио кнопки,
    16:00 - Стилизация селекта.
    Лайк, чтобы выбить в топ!

  • @dimavavilov7737
    @dimavavilov7737 4 ปีที่แล้ว +19

    Спасибо тебе огромное за стилизацию select, ты спас мои сроки)

  • @Alex-bt1gd
    @Alex-bt1gd 4 หลายเดือนก่อน

    Отличное видео.Подробно,понятно,неторопливо-то,что и требуется для новичков наподобии меня.Низкий поклон тебе добрый человек.Лайк безоговорочно.

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

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

    • @officialscorsese
      @officialscorsese 2 ปีที่แล้ว

      Слава Туркменским разработчикам!🇹🇲

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

    Какой же клёвый видос, все очень понятно и без лишних слов, спасибо большое!

  • @maksimmalkov6136
    @maksimmalkov6136 2 ปีที่แล้ว

    Огромное вам спасибо. Очень долго пытался разобраться, как все это делать) После вашего объяснения 5 минут и всё)))

  • @_Fantom_.
    @_Fantom_. 3 ปีที่แล้ว +2

    Спасибо за очень полезный и понятный урок!

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

    Очень информативно и приятно смотреть) Спасибо за урок.

    • @BrainsCloud
      @BrainsCloud  5 ปีที่แล้ว

      Пожалуйста!

  • @ЕвгенийАлександров-з2ч
    @ЕвгенийАлександров-з2ч 4 ปีที่แล้ว

    Отличный урок !!! Лучшие курсы наверное в рунете

  • @drknss3021
    @drknss3021 2 ปีที่แล้ว

    Огромное спасибо. Отличная подача!

  • @Mykhailo_Vdovychenko
    @Mykhailo_Vdovychenko 5 ปีที่แล้ว

    Очень интересный урок! Реально круто, как в пару строк кода обновить обыденные елементы страницы.

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

    Огромное человеческое спасибо!

  • @JavaScriptcher
    @JavaScriptcher 3 ปีที่แล้ว

    Спасибо за стилизацию checkbox ÷ У меня получилось с первого раза

  • @BearVodkaAndValenki
    @BearVodkaAndValenki 5 ปีที่แล้ว +4

    ::before по правилам следует писать с двумя двоеточиями.
    Если применяешь position: absolute, то задавать display: block уже не нужно.
    Выравнивание .checkbox__label:after по центру, используя top и left в пикселях, не совсем рационально, потому что, если понадобиться поменять размер чекбокса, то придётся заново менять и эти значения. Здесь выравнивание можно сделать более универсальным.

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

      :before можно писать и с один двоеточием
      Остальное - дело каждого

    • @OleksandrPohribnyi
      @OleksandrPohribnyi 4 ปีที่แล้ว

      Есть такое понятие как версии HTML, так вот для новеньких советую почитать и понять, что написание в формате ::before было в 4 версии, а вот в HTML 5 можно писать уже с одним двоеточием

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

      @@OleksandrPohribnyi Нет

    • @ПожилойБилибоба
      @ПожилойБилибоба 2 ปีที่แล้ว +1

      @@BearVodkaAndValenki что нет, если да) в новых версиях без разницы, да и на видосе работает, поэтому безпонтовая придирка к автору)

  • @КристинаКр-ч2о
    @КристинаКр-ч2о 3 ปีที่แล้ว

    спасибо! объясняешь классно, продолжай, пожалуйста, снимать!

  • @АлександрВасилевский-е2й
    @АлександрВасилевский-е2й 5 ปีที่แล้ว +2

    Спасибо за урок, продолжай в том же духе!

  • @maxyaborov6323
    @maxyaborov6323 2 ปีที่แล้ว

    Отличный урок, благодарю

  • @gritsienkooleg3447
    @gritsienkooleg3447 2 ปีที่แล้ว

    Ох, реально понятно и круто, спасибо!!

  • @БогданОсин-ф7и
    @БогданОсин-ф7и ปีที่แล้ว

    Спасибо, добил дз по аналогии)

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

    Спасибо. Интересно

  • @ОлександрОпенько-ь6м
    @ОлександрОпенько-ь6м 4 ปีที่แล้ว

    будет интересно посмотреть видео про свойства appearance

  • @АнтонТеньшаков
    @АнтонТеньшаков 5 ปีที่แล้ว +7

    Спасибо! Если можешь разбери эффект исчезновения как в Мстителях когда люди испарялись

  • @Дмитрий-в8н2з
    @Дмитрий-в8н2з 5 ปีที่แล้ว

    Было бы круто еще увидеть видео по стилизации стрелок в теге input )

  • @vazgenaleksanyan2929
    @vazgenaleksanyan2929 5 ปีที่แล้ว

    за одного такого фича - CSS triangle generator..... тебе большое спасибо

  • @Robi_Bobi
    @Robi_Bobi 3 ปีที่แล้ว

    круто! Спасибо!

  • @viktoriyamorozova637
    @viktoriyamorozova637 4 ปีที่แล้ว

    Спасибо! Очень помогли.

  • @ДенисЩербинин-ш8у
    @ДенисЩербинин-ш8у 2 ปีที่แล้ว

    Спасибо!

  • @mit7871
    @mit7871 4 ปีที่แล้ว

    Топовый видос!

  • @a.d.3019
    @a.d.3019 5 ปีที่แล้ว

    Это супер!

  • @reghan2936
    @reghan2936 4 ปีที่แล้ว +6

    Благодарю за урок.
    У меня появился такой вопрос, возможно ли стилизовать input type="date" ?
    Если возможно, то был бы рад увидеть видео урок от вас по этой теме.

  • @progerlife6690
    @progerlife6690 5 ปีที่แล้ว

    Приехал с командировки и увидел в почте новые видосы.. Класс супер!! Так держать!! Дима можешь снять ролик по Less или Sass?
    буду благодарен.

  • @МаксимДенисов-о5м
    @МаксимДенисов-о5м 5 ปีที่แล้ว +1

    спасибо ты мне помог

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

    Пробую сделать, как через классы, так и на прямую обратиться к элементу imput[type=checkbox], просто не меняются стили для after и before

  • @johnrichardson632
    @johnrichardson632 5 ปีที่แล้ว

    Спасибо огромное, то что надо!

  • @Jdjdjjjxhzh
    @Jdjdjjjxhzh 3 ปีที่แล้ว

    Полезное видео

  • @Viktorres1
    @Viktorres1 4 ปีที่แล้ว

    Очень полезный урок! Вы помогли мне во многом. Особенно с селектом!

  • @andrussian
    @andrussian 4 ปีที่แล้ว

    крутое видео!

  • @VladimirSalygin
    @VladimirSalygin 2 ปีที่แล้ว

    Добрый день. Очень круто! Спасибо! Вопрос, может глупый, но все-же - данные из кастомного селекта из батона будут улитать на сервер при отправке формы?

    • @BrainsCloud
      @BrainsCloud  2 ปีที่แล้ว

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

  • @mrECMAScript
    @mrECMAScript 5 ปีที่แล้ว

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

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

    пахнет комфортом

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

    Что за плагин, который при клике в браузере, маркирует код написаный в редакторе кода brackets и наоборот? Есть такая связь в VS Code? Спасибо!

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

    Подскажите что у вас за плагин, который чертит пунктирной линией отступы?

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

      по-моему это сам редактор Brackets по умолчанию делает в live режиме

  • @zakharko7720
    @zakharko7720 2 ปีที่แล้ว

    Большое спасибо, очень доходчиво и понятно!
    Вопрос. После выбора одного из элементов выпадающего списка цвет и толщина границы меняются на стандартные. Только после последующего взаимодействия с любым другим элементом страницы цвет и толщина границы списка возвращаются к установленным в .select select. Почему так и как можно победить?

  • @carma2759
    @carma2759 4 ปีที่แล้ว

    аху..... это так годно

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

    Так мало просмотров, аж грустно(((

  • @Shakhrom-b7d
    @Shakhrom-b7d 5 ปีที่แล้ว +1

    Уроки очень даже зачетные, про такие нюансы стилизации мало кто рассказывает, только вот не хватает других элементов формы (range, file, num, date) и т.д., для полной стилизации+функционала вы используете готовые jquery/js плагины или делаете своими силами?

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

      range, file можно тоже стилизовать используя css. Для выборы даты и времени - плагины.

  • @bearbullc
    @bearbullc 5 ปีที่แล้ว

    Сделал в точности как в видосе,но почему то при нажатии на label ничего не происходит с checkboxom,с чем это может быть связано?

  • @Unknown-rx3br
    @Unknown-rx3br 5 ปีที่แล้ว

    как выравнять слова относительно радиуса, ведь они прижаты как бы к верху?

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

    Селекты понятно, а options? Видео хорошее, спасибо )

    • @BrainsCloud
      @BrainsCloud  5 ปีที่แล้ว

      через css никак

    • @irustv7674
      @irustv7674 5 ปีที่แล้ว

      Нужно всю логику элементов прописывать в Js, тогда можно кастомизировать стили всех элементов в select

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

    А как достучаться до оption чтобы хотя бы hover повесить

  • @Game-oz6gg
    @Game-oz6gg 3 ปีที่แล้ว

    А как, как сделать, чтобы фон выпадающего списка Select был не белый, а такой же, как фон страницы?
    Чтобы он не выделялся белым пятном?

  • @Chimichuri-z6m
    @Chimichuri-z6m 2 ปีที่แล้ว

    Подскажите почему у меня текст внутри лэйбла очень странно себя ведёт,он не располагается по длине коробки,а как-то сам рандомно переносится

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

    Такой вариант стилизаций если использовать таб для перемещения по странице получает фокус?

  • @7ZazmaZ7
    @7ZazmaZ7 4 ปีที่แล้ว

    спс

  • @Yhwach-mv9cu
    @Yhwach-mv9cu 5 ปีที่แล้ว

    Привет!
    Помогите определиться, я хочу начать изучение Бэкенда, примерно знаю что учить, mysql, php... Но ее знаю с чего начать, в какой последовательности учить, и сколько уйдет на освоение базовых навыков бэкенда времени, могу ли я после получение базы идти брать заказы на фриланс? Вообщем суть вопроса такова: что учить, в какой последовательности, и сколько время уйдёт, и через сколько можно пробовать брать работу?

    • @irustv7674
      @irustv7674 5 ปีที่แล้ว

      Бери и пробуй делать то, что пишут в заказах на фрилансе. Отсюда получишь ответы на свои вопросы.

  • @АнтонТеньшаков
    @АнтонТеньшаков 5 ปีที่แล้ว

    а можно ли таким способом при нажатии на чекбокса менять например цвет фона у блока в котором они все находятся?

    • @BrainsCloud
      @BrainsCloud  5 ปีที่แล้ว

      Антон Теньшаков через js

  • @shtas89
    @shtas89 5 ปีที่แล้ว

    свойство appearance вроде еще эксперементальный вариант. Почему не использовать display: none; ?
    и не надо будет писать position

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

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

  • @dmitryvarnavskikh5648
    @dmitryvarnavskikh5648 3 ปีที่แล้ว

    А вот мне как раз думается, что стилизация select>options очень важна и интересна, потому что стандартная убого выглядит. Благо на codepen есть готовые решения.

  • @crond
    @crond 9 หลายเดือนก่อน

    Почему во всех подобных уроках не рекомендуют скрывать главный чекбокс через display: none ?

  • @non_holy6286
    @non_holy6286 5 ปีที่แล้ว

    а что это за плагин для редактора кода, что открывает окошко выбора цвета прямо в редакторе?

    • @BrainsCloud
      @BrainsCloud  5 ปีที่แล้ว

      Иван Фадеев ctrl + e в brackets

  • @СергейДудкин-ц5к
    @СергейДудкин-ц5к 2 ปีที่แล้ว

    Пишу код на React, никогда не требовалось убирать рамку у select, но потребовалось, тонну информации перебрал и нашёл ваше видео, но увы у меня не работает 😒

  • @tririustenax1268
    @tririustenax1268 5 ปีที่แล้ว

    Спасибо! Даже "Сруслищ" - не испортил видос

  • @kirillusenko
    @kirillusenko 4 ปีที่แล้ว

    Как ты так сделал, что без обновления страницы всё отображается в браузере?

    • @BrainsCloud
      @BrainsCloud  4 ปีที่แล้ว

      live preview в brackets

  • @Alex-hm3uk
    @Alex-hm3uk 5 ปีที่แล้ว

    А выпадающий список в селекте тоже надо стилизовать

  • @adiljumabaev3008
    @adiljumabaev3008 2 ปีที่แล้ว

    я никак не могу обратится к родителю в scss помогите !!!

  • @SerhiiD-y4p
    @SerhiiD-y4p 3 ปีที่แล้ว

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

  • @ДмитрийБ-е6и
    @ДмитрийБ-е6и 5 ปีที่แล้ว

    это css3 чистый?

  • @volodymyrkudriashov9002
    @volodymyrkudriashov9002 5 ปีที่แล้ว

    Всё классно конечно, я лайк поставил, но выпадающий список режет глаз.

  • @Alex-ni2uv
    @Alex-ni2uv 3 ปีที่แล้ว

    не сработало у меня с checkbox:(

  • @Харизма-ы6э
    @Харизма-ы6э 3 ปีที่แล้ว

    1 кнопка срабатывает а другие нет :(

  • @EgorMoscowNeverSleep
    @EgorMoscowNeverSleep 4 ปีที่แล้ว

    label с аттрибутом for - это зло. Потенциально (с вероятностью 90%), при копипасте на очередную форму возникнет ситуация, когда в html будут повторяться id элементов input, что приведёт к тому, что форма ввода будет работать не корректно.

    • @BrainsCloud
      @BrainsCloud  4 ปีที่แล้ว

      Глупость написали. Бездумно копипастить код - это зло. А label с атрибутом for это правильная работа для связки элементов форм с их ярлыками, а так же очень полезно для создания сайтов, которые будут хорошо читаться для скринридеров, что позволяет людям с ограниченными возможностями использовать ваш сайт более удобно.

    • @EgorMoscowNeverSleep
      @EgorMoscowNeverSleep 4 ปีที่แล้ว

      @@BrainsCloud Правильная работа для связки элементов - это вложить input внутрь label - и компонент получается ограничен одним контейнером (label) и аттрибут for не нужен, и стили легко писать и никаких проблем при копировании вёрстки.

    • @BrainsCloud
      @BrainsCloud  4 ปีที่แล้ว

      Egor Nikolaev почитайте для чего нужен тег label, а то что вы написали это ненужный костыль

    • @EgorMoscowNeverSleep
      @EgorMoscowNeverSleep 4 ปีที่แล้ว

      @@BrainsCloud Прочитал. Написано: "A can be associated with a control either by placing the control element inside the element, or by using the for attribute."
      Где тут про "ненужный костыль"?
      Я уже 10 лет верстаю, и для меня как раз аттрибут for - это ненужный костыль..

    • @BrainsCloud
      @BrainsCloud  4 ปีที่แล้ว

      Egor Nikolaev если помещать туда ещё и текст, который относится к элементу формы то да, а то что вы сначала написали оборачивать input в label - в этом я не вижу никакого смысла

  • @diaskappassov
    @diaskappassov 5 ปีที่แล้ว

    Почему мы пишем контент и оставляем его пустым?

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

      Чтобы в псевдоэлементе ничего не было

  • @fmleglrmglrml
    @fmleglrmglrml 4 ปีที่แล้ว

    Весь фронт на вот таких вот костылях

    • @7ZazmaZ7
      @7ZazmaZ7 4 ปีที่แล้ว

      так и есть

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

    ни что ни за чем не объяснено... просто проговаривание собственных действий... лажа а не урок.

  • @texno5440
    @texno5440 4 ปีที่แล้ว

    А можете научить? как объяснить клиенту, что селект извините, с дерьмовым выпадающим списком это так и надо.

    • @BrainsCloud
      @BrainsCloud  4 ปีที่แล้ว

      вы просите о невозможном

    • @texno5440
      @texno5440 4 ปีที่แล้ว

      @@BrainsCloud значить учить нужно как сделать нормальные кастом селект.(((

  • @uhkjkhgh
    @uhkjkhgh 3 ปีที่แล้ว

    Спасибо за очень полезный и понятный урок!

  • @oleg_andrianov
    @oleg_andrianov 4 ปีที่แล้ว

    Спасибо!