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