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

[@alexandrberezovskiy6065]

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

[@СтаніславТатарен]

Дякую

[@Alex-bt1gd]

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

[@dimavavilov7737]

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

[@atagurbanow9533]

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

[@officialscorsese]

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

[@dimaplatonov9624]

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

[@_Fantom_.]

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

[@maksimmalkov6136]

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

[@BearVodkaAndValenki]

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

[@BrainsCloud]

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

[@OleksandrPohribnyi]

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

[@BearVodkaAndValenki]

@@OleksandrPohribnyi Нет

[@ПожилойБилибоба]

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

[@ЕвгенийАлександров-з2ч]

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

[@artemmuzicovych1741]

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

[@BrainsCloud]

Пожалуйста!

[@kol4an721]

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

[@Mykhailo_Vdovychenko]

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

[@АлександрВасилевский-е2й]

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

[@drknss3021]

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

[@gritsienkooleg3447]

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

[@reghan2936]

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

[@КристинаКр-ч2о]

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

[@PanzarMarina]

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

[@progerlife6690]

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

[@maxyaborov6323]

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

[@АнтонТеньшаков]

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

[@JavaScriptcher]

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

[@БогданОсин-ф7и]

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

[@lawdriver88]

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

[@Jdjdjjjxhzh]

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

[@andreynasuto9734]

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

[@Chimichuri-z6m]

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

[@Дмитрий-в8н2з]

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

[@myroadmalankajosef9192]

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

[@ОлександрОпенько-ь6м]

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

[@VladimirSalygin]

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

[@BrainsCloud]

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

[@СтаниславГорячев-г1ъ]

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

[@viktoriyamorozova637]

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

[@crond]

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

[@johnrichardson632]

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

[@zakharko7720]

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

[@mit7871]

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

[@vazgenaleksanyan2929]

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

[@Game-oz6gg]

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

[@a.d.3019]

Это супер!

[@СергейДудкин-ц5к]

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

[@Shakhrom-b7d]

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

[@BrainsCloud]

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

[@Shalnoy2013]

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

[@Viktorres1]

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

[@bearbullc]

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

[@Unknown-rx3br]

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

[@adiljumabaev3008]

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

[@mrECMAScript]

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

[@МаксимДенисов-о5м]

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

[@TheLazarev88]

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

[@BrainsCloud]

да

[@Jdjdjjjxhzh]

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

[@dmitryvarnavskikh5648]

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

[@andrussian]

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

[@ayzukk6086]

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

[@giornogiovanna5222]

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

[@BrainsCloud]

это точно

[@Alex-hm3uk]

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

[@АнтонТеньшаков]

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

[@BrainsCloud]

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

[@shtas89]

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

[@BrainsCloud]

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

[@arthurshaidullin7981]

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

[@BrainsCloud]

через css никак

[@irustv7674]

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

[@Yhwach-mv9cu]

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

[@irustv7674]

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

[@oleg_andrianov]

Спасибо!

[@non_holy6286]

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

[@BrainsCloud]

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

[@kirillusenko]

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

[@BrainsCloud]

live preview в brackets

[@Харизма-ы6э]

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

[@Alex-ni2uv]

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

[@micsemal8531]

+

[@ДмитрийБ-е6и]

это css3 чистый?

[@carma2759]

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

[@7ZazmaZ7]

спс

[@SerhiiD-y4p]

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

[@EgorMoscowNeverSleep]

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

[@BrainsCloud]

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

[@EgorMoscowNeverSleep]

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

[@BrainsCloud]

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

[@EgorMoscowNeverSleep]

@@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]

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

[@diaskappassov]

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

[@BrainsCloud]

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

[@volodymyrkudriashov9002]

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

[@tririustenax1268]

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

[@BrainsCloud]

Triаrius Tenax что за сруслищ?))

[@tririustenax1268]

1:57

[@texno5440]

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

[@BrainsCloud]

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

[@texno5440]

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

[@fmleglrmglrml]

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

[@7ZazmaZ7]

так и есть

[@SwordToothTiger]

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

[@BrainsCloud]

Спасибо

[@uhkjkhgh]

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

[@ДенисЩербинин-ш8у]

Спасибо!