я недавно начал изучать веб разработку смотрю разные уроки читаю книги но подача учебного материала лучшего чем у тебя я еще не встречал спасибо тебе за это
::before по правилам следует писать с двумя двоеточиями. Если применяешь position: absolute, то задавать display: block уже не нужно. Выравнивание .checkbox__label:after по центру, используя top и left в пикселях, не совсем рационально, потому что, если понадобиться поменять размер чекбокса, то придётся заново менять и эти значения. Здесь выравнивание можно сделать более универсальным.
Есть такое понятие как версии HTML, так вот для новеньких советую почитать и понять, что написание в формате ::before было в 4 версии, а вот в HTML 5 можно писать уже с одним двоеточием
Благодарю за урок. У меня появился такой вопрос, возможно ли стилизовать input type="date" ? Если возможно, то был бы рад увидеть видео урок от вас по этой теме.
Большое спасибо, очень доходчиво и понятно! Вопрос. После выбора одного из элементов выпадающего списка цвет и толщина границы меняются на стандартные. Только после последующего взаимодействия с любым другим элементом страницы цвет и толщина границы списка возвращаются к установленным в .select select. Почему так и как можно победить?
Добрый день. Очень круто! Спасибо! Вопрос, может глупый, но все-же - данные из кастомного селекта из батона будут улитать на сервер при отправке формы?
Уроки очень даже зачетные, про такие нюансы стилизации мало кто рассказывает, только вот не хватает других элементов формы (range, file, num, date) и т.д., для полной стилизации+функционала вы используете готовые jquery/js плагины или делаете своими силами?
Привет! Помогите определиться, я хочу начать изучение Бэкенда, примерно знаю что учить, mysql, php... Но ее знаю с чего начать, в какой последовательности учить, и сколько уйдет на освоение базовых навыков бэкенда времени, могу ли я после получение базы идти брать заказы на фриланс? Вообщем суть вопроса такова: что учить, в какой последовательности, и сколько время уйдёт, и через сколько можно пробовать брать работу?
А вот мне как раз думается, что стилизация select>options очень важна и интересна, потому что стандартная убого выглядит. Благо на codepen есть готовые решения.
Пишу код на React, никогда не требовалось убирать рамку у select, но потребовалось, тонну информации перебрал и нашёл ваше видео, но увы у меня не работает 😒
я уже хотел ставить диз, но тут в самом конце, ты сказал именно то зачем я вообще залез сегодня в интернет, клик по стрелке и стилизация того блока который выпадает, теперь я точно знаю, что через селект его невозможно стилизовать, теперь нужно найти как это сделать. Но лайк и за это, большинство на эту тему просто показывают мне тег селект и его атрибуты, буд-то бы я не могу загуглить и почитать это в статье. К сожалению, список без стилизированого выпадающего меню вообще нонсенс без этого нет смысла показывать эту тему
label с аттрибутом for - это зло. Потенциально (с вероятностью 90%), при копипасте на очередную форму возникнет ситуация, когда в html будут повторяться id элементов input, что приведёт к тому, что форма ввода будет работать не корректно.
Глупость написали. Бездумно копипастить код - это зло. А label с атрибутом for это правильная работа для связки элементов форм с их ярлыками, а так же очень полезно для создания сайтов, которые будут хорошо читаться для скринридеров, что позволяет людям с ограниченными возможностями использовать ваш сайт более удобно.
@@BrainsCloud Правильная работа для связки элементов - это вложить input внутрь label - и компонент получается ограничен одним контейнером (label) и аттрибут for не нужен, и стили легко писать и никаких проблем при копировании вёрстки.
@@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 - это ненужный костыль..
Egor Nikolaev если помещать туда ещё и текст, который относится к элементу формы то да, а то что вы сначала написали оборачивать input в label - в этом я не вижу никакого смысла
0:00 - Стилизация чекбокса,
9:39 - Стилизация радио кнопки,
16:00 - Стилизация селекта.
Лайк, чтобы выбить в топ!
Дякую
Отличное видео.Подробно,понятно,неторопливо-то,что и требуется для новичков наподобии меня.Низкий поклон тебе добрый человек.Лайк безоговорочно.
Спасибо тебе огромное за стилизацию select, ты спас мои сроки)
я недавно начал изучать веб разработку смотрю разные уроки читаю книги но подача учебного материала лучшего чем у тебя я еще не встречал спасибо тебе за это
Слава Туркменским разработчикам!🇹🇲
Какой же клёвый видос, все очень понятно и без лишних слов, спасибо большое!
Огромное вам спасибо. Очень долго пытался разобраться, как все это делать) После вашего объяснения 5 минут и всё)))
Спасибо за очень полезный и понятный урок!
Отличный урок !!! Лучшие курсы наверное в рунете
Очень информативно и приятно смотреть) Спасибо за урок.
Пожалуйста!
::before по правилам следует писать с двумя двоеточиями.
Если применяешь position: absolute, то задавать display: block уже не нужно.
Выравнивание .checkbox__label:after по центру, используя top и left в пикселях, не совсем рационально, потому что, если понадобиться поменять размер чекбокса, то придётся заново менять и эти значения. Здесь выравнивание можно сделать более универсальным.
:before можно писать и с один двоеточием
Остальное - дело каждого
Есть такое понятие как версии HTML, так вот для новеньких советую почитать и понять, что написание в формате ::before было в 4 версии, а вот в HTML 5 можно писать уже с одним двоеточием
@@OleksandrPohribnyi Нет
@@BearVodkaAndValenki что нет, если да) в новых версиях без разницы, да и на видосе работает, поэтому безпонтовая придирка к автору)
Очень интересный урок! Реально круто, как в пару строк кода обновить обыденные елементы страницы.
Огромное спасибо. Отличная подача!
Огромное человеческое спасибо!
Спасибо за урок, продолжай в том же духе!
Спасибо за стилизацию checkbox ÷ У меня получилось с первого раза
Ох, реально понятно и круто, спасибо!!
спасибо! объясняешь классно, продолжай, пожалуйста, снимать!
Отличный урок, благодарю
Приехал с командировки и увидел в почте новые видосы.. Класс супер!! Так держать!! Дима можешь снять ролик по Less или Sass?
буду благодарен.
Спасибо, добил дз по аналогии)
Было бы круто еще увидеть видео по стилизации стрелок в теге input )
будет интересно посмотреть видео про свойства appearance
Спасибо. Интересно
Очень полезный урок! Вы помогли мне во многом. Особенно с селектом!
Благодарю за урок.
У меня появился такой вопрос, возможно ли стилизовать input type="date" ?
Если возможно, то был бы рад увидеть видео урок от вас по этой теме.
Это супер!
Спасибо огромное, то что надо!
Пробую сделать, как через классы, так и на прямую обратиться к элементу imput[type=checkbox], просто не меняются стили для after и before
Спасибо! Очень помогли.
Спасибо! Если можешь разбери эффект исчезновения как в Мстителях когда люди испарялись
Топовый видос!
круто! Спасибо!
спасибо ты мне помог
за одного такого фича - CSS triangle generator..... тебе большое спасибо
Большое спасибо, очень доходчиво и понятно!
Вопрос. После выбора одного из элементов выпадающего списка цвет и толщина границы меняются на стандартные. Только после последующего взаимодействия с любым другим элементом страницы цвет и толщина границы списка возвращаются к установленным в .select select. Почему так и как можно победить?
Полезное видео
Добрый день. Очень круто! Спасибо! Вопрос, может глупый, но все-же - данные из кастомного селекта из батона будут улитать на сервер при отправке формы?
В этом способе используются обычные селекты и данные будут отправляться без проблем
Спасибо!
Что за плагин, который при клике в браузере, маркирует код написаный в редакторе кода brackets и наоборот? Есть такая связь в VS Code? Спасибо!
крутое видео!
Спасибо, ты топ) накручиваю просмотры, уже раз 5 возвращался, чтобы сделать себе различные инпуты!
пахнет комфортом
Подскажите что у вас за плагин, который чертит пунктирной линией отступы?
по-моему это сам редактор Brackets по умолчанию делает в live режиме
Уроки очень даже зачетные, про такие нюансы стилизации мало кто рассказывает, только вот не хватает других элементов формы (range, file, num, date) и т.д., для полной стилизации+функционала вы используете готовые jquery/js плагины или делаете своими силами?
range, file можно тоже стилизовать используя css. Для выборы даты и времени - плагины.
Подскажите почему у меня текст внутри лэйбла очень странно себя ведёт,он не располагается по длине коробки,а как-то сам рандомно переносится
спс
А как достучаться до оption чтобы хотя бы hover повесить
аху..... это так годно
Селекты понятно, а options? Видео хорошее, спасибо )
через css никак
Нужно всю логику элементов прописывать в Js, тогда можно кастомизировать стили всех элементов в select
А как, как сделать, чтобы фон выпадающего списка Select был не белый, а такой же, как фон страницы?
Чтобы он не выделялся белым пятном?
как выравнять слова относительно радиуса, ведь они прижаты как бы к верху?
Так мало просмотров, аж грустно(((
это точно
Сделал в точности как в видосе,но почему то при нажатии на label ничего не происходит с checkboxom,с чем это может быть связано?
Привет!
Помогите определиться, я хочу начать изучение Бэкенда, примерно знаю что учить, mysql, php... Но ее знаю с чего начать, в какой последовательности учить, и сколько уйдет на освоение базовых навыков бэкенда времени, могу ли я после получение базы идти брать заказы на фриланс? Вообщем суть вопроса такова: что учить, в какой последовательности, и сколько время уйдёт, и через сколько можно пробовать брать работу?
Бери и пробуй делать то, что пишут в заказах на фрилансе. Отсюда получишь ответы на свои вопросы.
Такой вариант стилизаций если использовать таб для перемещения по странице получает фокус?
да
Почему во всех подобных уроках не рекомендуют скрывать главный чекбокс через display: none ?
А вот мне как раз думается, что стилизация select>options очень важна и интересна, потому что стандартная убого выглядит. Благо на codepen есть готовые решения.
Спасибо! Даже "Сруслищ" - не испортил видос
Triаrius Tenax что за сруслищ?))
1:57
свойство appearance вроде еще эксперементальный вариант. Почему не использовать display: none; ?
и не надо будет писать position
Это сделает его невидимым для скринридеров, но в целом если думать только об обычных пользователях, тогда тоже как вариант.
а можно ли таким способом при нажатии на чекбокса менять например цвет фона у блока в котором они все находятся?
Антон Теньшаков через js
я никак не могу обратится к родителю в scss помогите !!!
Пишу код на React, никогда не требовалось убирать рамку у select, но потребовалось, тонну информации перебрал и нашёл ваше видео, но увы у меня не работает 😒
а что это за плагин для редактора кода, что открывает окошко выбора цвета прямо в редакторе?
Иван Фадеев ctrl + e в brackets
Как ты так сделал, что без обновления страницы всё отображается в браузере?
live preview в brackets
А выпадающий список в селекте тоже надо стилизовать
это css3 чистый?
не сработало у меня с checkbox:(
+
1 кнопка срабатывает а другие нет :(
я уже хотел ставить диз, но тут в самом конце, ты сказал именно то зачем я вообще залез сегодня в интернет, клик по стрелке и стилизация того блока который выпадает, теперь я точно знаю, что через селект его невозможно стилизовать, теперь нужно найти как это сделать. Но лайк и за это, большинство на эту тему просто показывают мне тег селект и его атрибуты, буд-то бы я не могу загуглить и почитать это в статье. К сожалению, список без стилизированого выпадающего меню вообще нонсенс без этого нет смысла показывать эту тему
Всё классно конечно, я лайк поставил, но выпадающий список режет глаз.
Почему мы пишем контент и оставляем его пустым?
Чтобы в псевдоэлементе ничего не было
label с аттрибутом for - это зло. Потенциально (с вероятностью 90%), при копипасте на очередную форму возникнет ситуация, когда в html будут повторяться id элементов input, что приведёт к тому, что форма ввода будет работать не корректно.
Глупость написали. Бездумно копипастить код - это зло. А label с атрибутом for это правильная работа для связки элементов форм с их ярлыками, а так же очень полезно для создания сайтов, которые будут хорошо читаться для скринридеров, что позволяет людям с ограниченными возможностями использовать ваш сайт более удобно.
@@BrainsCloud Правильная работа для связки элементов - это вложить input внутрь label - и компонент получается ограничен одним контейнером (label) и аттрибут for не нужен, и стили легко писать и никаких проблем при копировании вёрстки.
Egor Nikolaev почитайте для чего нужен тег label, а то что вы написали это ненужный костыль
@@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 - это ненужный костыль..
Egor Nikolaev если помещать туда ещё и текст, который относится к элементу формы то да, а то что вы сначала написали оборачивать input в label - в этом я не вижу никакого смысла
Весь фронт на вот таких вот костылях
так и есть
А можете научить? как объяснить клиенту, что селект извините, с дерьмовым выпадающим списком это так и надо.
вы просите о невозможном
@@BrainsCloud значить учить нужно как сделать нормальные кастом селект.(((
ни что ни за чем не объяснено... просто проговаривание собственных действий... лажа а не урок.
Спасибо
Спасибо за очень полезный и понятный урок!
Спасибо!