Тёмный

Custom select menu - CSS only 

Kevin Powell
Подписаться 915 тыс.
Просмотров 145 тыс.
50% 1

Check out Scrimba's new career path: scrimba.com/path/gfrontend?ut...
Also, a big thank you to David Lower who gave me the idea for this video! You can check out his site at squirrelwise.com/
// Timestamps //
00:00 - Intro
02:02 - The HTML
03:03 - Starting the CSS
05:14 - Setting up the custom button
08:05 - pointer-events none
09:30 - Fixing the size
11:11 - The custom icons
16:37 - Outro
Customizing form elements can be one of the hardest things to do with CSS, with select menus being the worst of the bunch. Instead of creating a completely new element with a pile of divs and a bunch of JS, there are ways to customize select menus though!
It doesn't give you 100% control, but you can go pretty far with a couple of pseudo-elements and the use of pointer-events: none - read more about pointer events here: developer.mozilla.org/en-US/d...
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

 

8 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 194   
@RANKKY9
@RANKKY9 3 года назад
Kevin: pointer-events: none; Me: 🤯🤯🤯
@kenny123451
@kenny123451 3 года назад
Thank you! pointer-events:none; Is a lifesaver! In my current project, I started to write Js to make stuff at the background clickable.... :D You saved me a lot of hours!
@TomAinsworth94
@TomAinsworth94 8 месяцев назад
I’ve struggling to get something like this together at work today, and your video is perfect to get me started! Thanks as always Kevin
@yitzchaksviridyuk932
@yitzchaksviridyuk932 3 года назад
Appreciate your content so much that I don't skip a lot of the ads on your videos. 😄
@md.mirazuddin364
@md.mirazuddin364 3 года назад
Thanks again for making such incredible video. pointer-events: none. that was a life saver.
@bijayaadhikari442
@bijayaadhikari442 3 года назад
Scrimba is great, not just to learn, practice every moment.
@arsaurabh6044
@arsaurabh6044 2 года назад
This was a cool video. Learned a lot. And that border trick was pretty neat.
@mrabhijitrabha
@mrabhijitrabha Год назад
pointer-event: none; made my day, thank you master ❤️
@captaindesign
@captaindesign 3 года назад
Excellent tutorial, thanks Kevin!
@zvelkimD
@zvelkimD 3 года назад
Super! Always nice to see even experts have trouble with top and translate properties :D
@arseneawounou180
@arseneawounou180 3 года назад
Maybe you dunno but you're doing a great job and teaching a lotta people in the world! Thanks! ✨
@Avinash.i1Brand
@Avinash.i1Brand Год назад
You saved my time by pointer events property. Thank you Kevin. Much love 💕
@mostafagh3573
@mostafagh3573 9 месяцев назад
you saved my day and my mental health in one move, god bless you .
@andriilukianenko8106
@andriilukianenko8106 2 года назад
I don't think I will ever be able to fully comprehend CSS, but Kevin's content makes me feel I know some tips and hacks :D
@abnerwillys
@abnerwillys 3 года назад
Amazing video man. I'm a Dev jr on stack JS, and this video helps very much. Thanks and best regards from Brazil.
@khalilmahmoodiyan975
@khalilmahmoodiyan975 7 месяцев назад
Awesome. I was looking for this for many days
@seathwolf5610
@seathwolf5610 3 года назад
You are the best teacher!!!! Thank you for all your videos.
@miracleio8555
@miracleio8555 3 года назад
Another Awesome trick, Thank you Kevin!
@Markor91
@Markor91 Год назад
It works like a charm, thank you!
@glenn4140
@glenn4140 3 года назад
Thank you Kevin. You are so helpful!
@mke7605
@mke7605 3 года назад
On firefox this doesn't seem to behave. Setting the color for the select results in Firefox on my machine in in a nicely colored object, but the option list is still white. On Chrome it behaves like expected though.
@s.fofandi
@s.fofandi 3 года назад
I did a similar custom select input on one of my project another thing you can do when doing something like this is have an SVG with your up and down arrows and use that as the background of the select element. then with repeat: none, position: right, and size: 100% auto, you can place it to the right. this prevents you from having multiple classes and an extra dom element for an effect like that. that being said OBVIOUSLY there are 1001 ways of doing whatever you want in CSS (that pointer-events thing was brilliant)
@pablowbk
@pablowbk 3 года назад
I came for the tshirt, stayed for the content 😎
@elcolo77
@elcolo77 2 года назад
Wow, nice and usefull video!!! Thanks for everyday's rising learning curve!
@ChillCityNaveen
@ChillCityNaveen 3 года назад
Awesome trick to create triangles thanks kevin:)
@MohammadAbdulHyeShaon
@MohammadAbdulHyeShaon 3 года назад
Excellent...Go Ahead my dear....
@ThiagoVieira91
@ThiagoVieira91 3 года назад
Me: "WTF!? How I'm going to build this context tooltip? The icon is messing everything!" Kevin: pointer-events: none; Me: 🤯
@bishwajitsarkar8873
@bishwajitsarkar8873 7 месяцев назад
it's a real helpful.Thank you sir, for the tutorial.
@waelmoh
@waelmoh 3 года назад
pointer event, I didn't know anything about this before :D ThanQ
@AjayKumar-pn5yy
@AjayKumar-pn5yy Год назад
You are awesome Kevin ❤️❤️❤️
@giorgimindiashvili3810
@giorgimindiashvili3810 Год назад
i love u man i love u always when i watching your videos i always found something new bravo
@abdiasmigaud2647
@abdiasmigaud2647 Год назад
Thank you very much for this video.
@dev4SEO
@dev4SEO 3 года назад
Thanks. I really enjoyed this one
@kiliusz
@kiliusz 3 года назад
pointer-events: none Very nice tip.
@nonchalant8473
@nonchalant8473 3 года назад
Great tutorial! Thanks
@manosmenexis3160
@manosmenexis3160 3 года назад
You could use a transformX for the arrows and then add top to the ::before and bottom to the ::after. That way it would be the same number.
@0the0ambient0
@0the0ambient0 3 года назад
Thanks for another great tutorial.
@j.almadhaji
@j.almadhaji 3 года назад
I enjoy watching you ❤
@DavidAshby1
@DavidAshby1 3 года назад
Hi Kevin, thanks for another great tutorial. I have one question though. When I put the dropdown in a container that spans the full width of the screen the custom arrow moves to the far right of the screen so I have ended up creating another container within to hold the dropdown which keeps the elements together (although we have done positioning relative and absolute). Shouldn't the position: absolute; on the custom arrow keep its position no matter the width of the viewport ?
@_Valentin
@_Valentin 2 года назад
I have the same problem and i dont understand how to fix it :(
@presidiun
@presidiun 3 года назад
very nice. I have a question how do you style the drop down menu so that it moves slightly up?
@newentu
@newentu 11 месяцев назад
Excelente tutorial!
@viktorbublic
@viktorbublic 3 года назад
This is great. Thank you.
@KevinPowell
@KevinPowell 3 года назад
You're very welcome!
@mdyousufgazi4030
@mdyousufgazi4030 3 года назад
awesome video! loved it
@KevinPowell
@KevinPowell 3 года назад
So glad!
@bahaajasim3793
@bahaajasim3793 2 года назад
Thank you Kevin
@chrisj.2611
@chrisj.2611 3 года назад
Quite a nice trick. But personally i would use font awesome for example for the arrow (unless you dont want to use any outside stylesheet). But this gets rid of the before and after pseudo element.
@MyDistortedWorld
@MyDistortedWorld 3 года назад
Nice Kevin! Thanks man 👍
@shaunbowen
@shaunbowen 3 года назад
For the vertical positioning of the triangles, wouldn't it be better to use something like top: calc(50% - 0.2em) and bottom: calc(50% - 0.2em) respectively? Then you can adjust the triangle size and always have them spaced 0.4em apart in the centre?
@MikeyRussell88
@MikeyRussell88 3 года назад
It's a real shame that even today css doesn't provide ways to style these elements. For security I can understand they cannot be fully customisable but the basics like colours borders arrow styles should be available to the user without needing hacks. Maybe in CSS 4 eh?
@maneeshrockx667
@maneeshrockx667 3 года назад
Thankyou , I learned something interesting 😍.. can I know what theme are you using in vs code?.
@m2kdevelopments
@m2kdevelopments 3 года назад
Awesome video
@nickwoodward819
@nickwoodward819 2 года назад
Love this, but out of interest, do you know of a good source on how to make a completely custom select element?
@j0ca1995
@j0ca1995 3 года назад
Great video!
@gethermedel3620
@gethermedel3620 3 года назад
I knew this 5 years ago. it's nice you are teaching this to others :D keep it up!
@mattmarkus4868
@mattmarkus4868 2 года назад
Great video, but how do you change the blue hover highlight color on the options? Chrome is blue, Edge is dark grey, etc. Is that possible?
@Sisier
@Sisier 3 года назад
Nice video !!! very useful
@shulehr
@shulehr Год назад
very good tutorial
@lukedorny
@lukedorny 3 года назад
Could you make video with a couple of uses for clip path? Thanks, Kevin!
@vojislavdjuric8856
@vojislavdjuric8856 4 месяца назад
Nice. Thank you.
@c__beck
@c__beck 3 года назад
You have the best shirts, Kevin!
@KevinPowell
@KevinPowell 3 года назад
Thanks, this is def. one of my favourites :)
@BloodyClash
@BloodyClash 3 года назад
oooh. just noticed...is that a zelda shirt ?
@c__beck
@c__beck 3 года назад
@@BloodyClash it is!
@BloodyClash
@BloodyClash 3 года назад
@@c__beck Cool. I love Zelda Stuff (maybe not the biggest fan in the world but still love it)
@lucass.p9579
@lucass.p9579 3 года назад
Great video. I'll do something like that in one of my project, because these difference between the browsers inputs/selects is annoying. And btw now Chrome has a super weird black outline on any type of focus.
@adao5308
@adao5308 2 года назад
Try using :focus {outline:none} on the property if you're still having that problem.
@vladislav.c
@vladislav.c 2 года назад
Thanks a lot. And i have a question. Is there any way customize select using just css, but instead of text in option use images. Or use text and images in option.
@mattwood8659
@mattwood8659 3 года назад
I was excited to see this at first. I really wanted a more consistent width for the options across the browsers but I'm a little disappointed you didn't do that. Is it possible at all to style the select options?
@texno5440
@texno5440 3 года назад
not this js
@MsElsospechoso28
@MsElsospechoso28 3 года назад
looking good on that zelda shirt
@marc_joan
@marc_joan 3 года назад
Hey Kevin, thanks for that tutorial, but... What about multiple select? I find them so tricky to customize!
@iUmerFarooq
@iUmerFarooq 3 года назад
That's amazing. ❣
@anamazanova
@anamazanova 3 года назад
Hey Kevin, any advice on how to change the placeholder color for this element??
@pawejurgielewicz7892
@pawejurgielewicz7892 3 года назад
Geat video as always! I just have a little question: how can you use Firefox and Chrome simultaneously via Live Server in VScode?
@migueldomingos4570
@migueldomingos4570 3 года назад
It works automatically in that way since it is running on a port on your localhost. You just have to go to localhost:5500 on both firefox and google
@iliankarasimirov9685
@iliankarasimirov9685 3 года назад
Kevin, thanks
@elvingonzalez8932
@elvingonzalez8932 2 месяца назад
Please. how to change the blue background hover option??
@abdulrahmannasser1079
@abdulrahmannasser1079 3 года назад
My opinion is to replace these custom icons to arrow up icon from font-awesome
@rayansh1245
@rayansh1245 2 года назад
thank you sir
@ralphmartynsamaniego7017
@ralphmartynsamaniego7017 3 года назад
Do another one for Radio and Check boxes as well! :D Great video btw!
@anuj7286
@anuj7286 3 года назад
Sir thankyou so much, can you please make a video on how to style checkbox in bootstrap?
@VenkateshMps
@VenkateshMps 3 года назад
Is any way available for change the active or focus background in the select list
@azhardanii
@azhardanii 2 года назад
amaziinggg sir, but any method to change hover color on selection option items? its soo difficult for mee, pleaseee helpp 🙏😭
@glowbug-clashofclans9116
@glowbug-clashofclans9116 3 года назад
damn very helpful man!!
@abstrxtinfinity
@abstrxtinfinity 2 года назад
Can we style the options part of the dropdown somehow? like when we hover them or select them.
@adao5308
@adao5308 2 года назад
Wow... Thanks!
@medhatadolf0
@medhatadolf0 2 года назад
Thank you :)
@AmirulIslam-gg2fn
@AmirulIslam-gg2fn 3 года назад
Awesome!
@nickwoodward819
@nickwoodward819 2 года назад
The differences, afaik, between inline-block and block, is that for the former you're using inline-block instead of flex, and for the latter you're using block instead of flex HTH :)
@mohan9285
@mohan9285 3 года назад
Pretty cool and interesting :)
@fozilbekmuhammedjonov9518
@fozilbekmuhammedjonov9518 2 года назад
Thanks that's cool ☺️
@Darkray201
@Darkray201 3 года назад
I knew pointer events but your usage really shocked me - simply genius 😂 Would it be possible to style the chrome 'cropped' options to look like those in Mozilla and moreover give them a custom - not blueish - hover effect or is this simply beyond the possibilities of css3?
@blackpurple9163
@blackpurple9163 Год назад
I thought that property meant click on it will do nothing, not even select it, didn't know it turns the element into a ghost element😅
@vojka2973
@vojka2973 3 года назад
everything is fine but when I select an option in firefox, the select box shrinks however it wants, in chrome is fine... why is that ? do you know how to fix this ? ty
@RobertFerentz
@RobertFerentz 3 года назад
Anyone know why chrome doesn't seem to set the background color for options given on the select element like it shows in this video? It's annoying.
@benjaminhammond7925
@benjaminhammond7925 3 года назад
Have you found a way to change the select's options background color???
@bhalchandragaikwad1605
@bhalchandragaikwad1605 3 года назад
hi, i understood who to customize "select" things. BUT i want to change background color and selection color of "option" things. how to do this? please explain
@GSYSYT
@GSYSYT 3 года назад
You don't. It's not possible to style options in a good way. You need custom markup and JS for that.
@hcsftw
@hcsftw 3 года назад
Hi Kevin, could you put this Demo into a Codepen? I am a bit too lazy to retype it, but I would love to experiment with it!
@jaswanthsimha1418
@jaswanthsimha1418 2 года назад
How do you select all the elements inside a div that has an id called header?
@user-ek7nj4vz1k
@user-ek7nj4vz1k Год назад
MDN Permitted content for : Zero or more or elements. So, could not be nested with the element
@SunilKumar-jc5cb
@SunilKumar-jc5cb 3 года назад
Can you please give me the list of HOVER CSS? Because I have tried to change the hover background color(default color blue) not able to change that. Can you please help me out with this?
@nikolavemic5216
@nikolavemic5216 Год назад
Great !!
@neo4now
@neo4now 3 года назад
Hi Kevin! would you consider break down and show how can you accoplishe gradian animation at the top of this page 'stripe.com' because for the love of god I just can not figure it out. (I know you have a video on some gradien animation but this once seams totaly diffrent). take care:)
@segsfault
@segsfault 3 года назад
Kevin: pointer-events: none; Me: What De Fok 🤯
@alf1712
@alf1712 3 года назад
Is it possible to align right the items inside the select list?
@muralidharan4216
@muralidharan4216 2 года назад
How to change the options hover blue color ? Thanks In Advance...!!!
@ataulhasan1894
@ataulhasan1894 3 года назад
wow this is helpfull
@tostuk2528
@tostuk2528 2 года назад
What are the meta and link tags in the beginning of the video?
@deniskotov
@deniskotov 3 года назад
Nice!
@KevinPowell
@KevinPowell 3 года назад
Glad you enjoyed it
Далее
Animated card with HTML & CSS | Tutorial
1:08:51
Просмотров 172 тыс.
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 59 тыс.
Learn CSS dropdown menus in 6 minutes! 🔻
6:36
Просмотров 64 тыс.
Is HTMX a Joke??
32:15
Просмотров 16 тыс.
Finally, Customizing Select Menus EASILY! - Future Dev
17:20
The secret to mastering CSS layouts
17:11
Просмотров 265 тыс.
Learn CSS Subgrid in 14 minutes
14:19
Просмотров 52 тыс.
How to create a theme switcher with HTML & CSS
28:21
Просмотров 108 тыс.
How to take control of Flexbox
16:01
Просмотров 103 тыс.
ASMR Programming - Animated Login Page - No Talking
18:18