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.
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 ?
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.
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
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 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?
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
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?
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.
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?
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
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?
Kevin: pointer-events: none;
Me: 🤯🤯🤯
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’ve struggling to get something like this together at work today, and your video is perfect to get me started! Thanks as always Kevin
pointer-event: none; made my day, thank you master ❤️
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 .
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)
Scrimba is great, not just to learn, practice every moment.
Me: "WTF!? How I'm going to build this context tooltip? The icon is messing everything!"
Kevin: pointer-events: none;
Me: 🤯
Appreciate your content so much that I don't skip a lot of the ads on your videos. 😄
Thanks again for making such incredible video.
pointer-events: none. that was a life saver.
I came for the tshirt, stayed for the content 😎
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?
Amazing video man. I'm a Dev jr on stack JS, and this video helps very much. Thanks and best regards from Brazil.
This was a cool video. Learned a lot. And that border trick was pretty neat.
You saved my time by pointer events property. Thank you Kevin. Much love 💕
Awesome. I was looking for this for many days
it's a real helpful.Thank you sir, for the tutorial.
Excellent...Go Ahead my dear....
pointer-events: none
Very nice tip.
Super! Always nice to see even experts have trouble with top and translate properties :D
You are awesome Kevin ❤️❤️❤️
Maybe you dunno but you're doing a great job and teaching a lotta people in the world! Thanks! ✨
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.
It works like a charm, thank you!
Kevin: pointer-events: none;
Me: What De Fok 🤯
You are the best teacher!!!! Thank you for all your videos.
Wow, nice and usefull video!!! Thanks for everyday's rising learning curve!
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.
Another Awesome trick, Thank you Kevin!
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)
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 :(
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 :)
Please. how to change the blue background hover option??
awesome video! loved it
So glad!
looking good on that zelda shirt
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.
Awesome trick to create triangles thanks kevin:)
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
This is great. Thank you.
You're very welcome!
Great tutorial! Thanks
Thank you Kevin
pointer event, I didn't know anything about this before :D ThanQ
Thank you very much for this video.
My opinion is to replace these custom icons to arrow up icon from font-awesome
Awesome video
Excelente tutorial!
Thanks for another great tutorial.
Nice Kevin! Thanks man 👍
Great video!
I enjoy watching you ❤
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?
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
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.
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
very good tutorial
Nice video !!!
very useful
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
Nice. Thank you.
Could you make video with a couple of uses for clip path? Thanks, Kevin!
@15:28 ... my daily css programing
Love this, but out of interest, do you know of a good source on how to make a completely custom select element?
Worth mentioning that *appearance* css property is experimental, not fully supported by all browsers.
very nice. I have a question how do you style the drop down menu so that it moves slightly up?
That's amazing. ❣
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.
thank you sir
I knew this 5 years ago. it's nice you are teaching this to others :D keep it up!
Awesome!
What theme extension are you using?
I'm using Atom Dark One... but I also use Bracket Pair Colorizer, so my brackets are different colors :)
Do another one for Radio and Check boxes as well! :D
Great video btw!
Nice shirt!
Thank you :)
What are the meta and link tags in the beginning of the video?
Have you found a way to change the select's options background color???
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
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!
MDN
Permitted content for :
Zero or more or elements.
So, could not be nested with the element
Pretty cool and interesting :)
Wow... Thanks!
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
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?
Thanks that's cool ☺️
Will this affect the mobile select drop down view?
The dropdown itself will look a little different in every browser. Some will still have gray backgrounds as well. The options are a bit of a wildcard.
Hey Kevin, thanks for that tutorial, but... What about multiple select? I find them so tricky to customize!
Can we style the options part of the dropdown somehow? like when we hover them or select them.
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.
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?
Is any way available for change the active or focus background in the select list
How do I edit the padding of the options?
damn very helpful man!!
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
Hey Kevin, any advice on how to change the placeholder color for this element??
Is it possible to align right the items inside the select list?
How do you select all the elements inside a div that has an id called header?
How can I make the same styling but with input and datalist?
Great !!
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?
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😅