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!
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)
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?
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.
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 :)
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.
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 ?
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.
i am more happy about pointer-events:none; I am very good in css, but i didnt know that... not shamed... :) We learning every day and css is more harder then Java, i think! :D
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?
Thank you for awsome videos. I would love to watch your live stream, but unfortunately my timingd don't match with schedule of live stream. Please make sure to upload stream afterwards.
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?
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
wtf, I never knew pointer events none will allow you to click the element behind :'(, I've had to find workarounds so many times to avoid that problem :O
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.
Things get whacky if you remove the top-level display:grid and center-items. Don't you need to set a width on the .custom-select element? Overall, though, the technique is superb! Great job.
@@KevinPowell That was a minor glitch it what is otherwise a great technique. I love how simple and direct the technique is. Your videos are always great, Kevin. Thank you!
Gotta be honest, that title was a little misleading. I was looking forward to learning of some secret to styling options in a select but it stopped there. This video is really more about Scrimba and pointer events: none . It's not a bad look but still not truly custom enough so I'll be sticking with my bootstrap/custom select implementation.
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:)
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!
Kevin: pointer-events: none;
Me: 🤯🤯🤯
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
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)
pointer-event: none; made my day, thank you master ❤️
Scrimba is great, not just to learn, practice every moment.
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
you saved my day and my mental health in one move, god bless you .
Me: "WTF!? How I'm going to build this context tooltip? The icon is messing everything!"
Kevin: pointer-events: none;
Me: 🤯
Thanks again for making such incredible video.
pointer-events: none. that was a life saver.
Amazing video man. I'm a Dev jr on stack JS, and this video helps very much. Thanks and best regards from Brazil.
Appreciate your content so much that I don't skip a lot of the ads on your videos. 😄
Awesome. I was looking for this for many days
pointer-events: none
Very nice tip.
You are awesome Kevin ❤️❤️❤️
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?
Excellent...Go Ahead my dear....
You saved my time by pointer events property. Thank you Kevin. Much love 💕
Super! Always nice to see even experts have trouble with top and translate properties :D
This was a cool video. Learned a lot. And that border trick was pretty neat.
It works like a charm, thank you!
it's a real helpful.Thank you sir, for the tutorial.
I came for the tshirt, stayed for the content 😎
Excellent tutorial, thanks Kevin!
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.
Thank you Kevin
You are the best teacher!!!! Thank you for all your videos.
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.
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 :)
Maybe you dunno but you're doing a great job and teaching a lotta people in the world! Thanks! ✨
Thank you very much for this video.
This is great. Thank you.
You're very welcome!
My opinion is to replace these custom icons to arrow up icon from font-awesome
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.
Another Awesome trick, Thank you Kevin!
Wow, nice and usefull video!!! Thanks for everyday's rising learning curve!
Thank you Kevin. You are so helpful!
i love u man i love u always when i watching your videos i always found something new bravo
awesome video! loved it
So glad!
Great tutorial! Thanks
You have the best shirts, Kevin!
Thanks, this is def. one of my favourites :)
oooh. just noticed...is that a zelda shirt ?
@@BloodyClash it is!
@@c__beck Cool. I love Zelda Stuff (maybe not the biggest fan in the world but still love it)
Please. how to change the blue background hover option??
looking good on that zelda shirt
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 ?
I have the same problem and i dont understand how to fix it :(
Nice. Thank you.
Awesome trick to create triangles thanks kevin:)
Excelente tutorial!
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.
Try using :focus {outline:none} on the property if you're still having that problem.
Awesome video
Kevin: pointer-events: none;
Me: What De Fok 🤯
pointer event, I didn't know anything about this before :D ThanQ
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?
thank you sir
very good tutorial
i am more happy about pointer-events:none; I am very good in css, but i didnt know that... not shamed... :) We learning every day and css is more harder then Java, i think! :D
Awesome!
Nice Kevin! Thanks man 👍
Thanks for another great tutorial.
Great video!
Great !!
I enjoy watching you ❤
Could you make video with a couple of uses for clip path? Thanks, Kevin!
I knew this 5 years ago. it's nice you are teaching this to others :D keep it up!
Wow... Thanks!
I prefer the per class model because when you subscribe, if you stop paying you lose access to everything. When you buy a class you get it forever
Nice!
Glad you enjoyed it
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?
not this js
That's amazing. ❣
Nice video !!!
very useful
Thank you for awsome videos.
I would love to watch your live stream, but unfortunately my timingd don't match with schedule of live stream.
Please make sure to upload stream afterwards.
It'll be uploaded!
Love this, but out of interest, do you know of a good source on how to make a completely custom select element?
MDN
Permitted content for :
Zero or more or elements.
So, could not be nested with the element
Thank you :)
Worth mentioning that *appearance* css property is experimental, not fully supported by all browsers.
Thanks that's cool ☺️
very nice. I have a question how do you style the drop down menu so that it moves slightly up?
Do another one for Radio and Check boxes as well! :D
Great video btw!
@15:28 ... my daily css programing
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?
Great
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
You don't. It's not possible to style options in a good way. You need custom markup and JS for that.
wtf, I never knew pointer events none will allow you to click the element behind :'(, I've had to find workarounds so many times to avoid that problem :O
Hey Kevin, thanks for that tutorial, but... What about multiple select? I find them so tricky to customize!
Thankyou , I learned something interesting 😍.. can I know what theme are you using in vs code?.
Cool.
Geat video as always! I just have a little question: how can you use Firefox and Chrome simultaneously via Live Server in VScode?
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
Nice shirt!
wow this is helpfull
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.
Pretty cool and interesting :)
Sir thankyou so much, can you please make a video on how to style checkbox in bootstrap?
Hey Kevin, any advice on how to change the placeholder color for this element??
Things get whacky if you remove the top-level display:grid and center-items. Don't you need to set a width on the .custom-select element? Overall, though, the technique is superb! Great job.
Ah, yeah. I just set it up as a quick example and didn't think of that. Setting a width on it might help things out when we put it in context.
@@KevinPowell That was a minor glitch it what is otherwise a great technique. I love how simple and direct the technique is. Your videos are always great, Kevin. Thank you!
Have you found a way to change the select's options background color???
damn very helpful man!!
amaziinggg sir, but any method to change hover color on selection option items? its soo difficult for mee, pleaseee helpp 🙏😭
Gotta be honest, that title was a little misleading. I was looking forward to learning of some secret to styling options in a select but it stopped there. This video is really more about Scrimba and pointer events: none . It's not a bad look but still not truly custom enough so I'll be sticking with my bootstrap/custom select implementation.
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!
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:)
Zelda shirt! There you have it, alrdy thought u are a nice guy. Now u just moved up in rank alot ^^