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)
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 ?
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?
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.
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 :)
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
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.
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.
3 ปีที่แล้ว
How can I make the same styling but with input and datalist?
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 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:)
You can color the Option. Is that what you were asking for? Both so that the selected option looks different in the dropdown list, but also so that it looks different from others in the select box when selected.
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?
This also works for input type="number" ? By default there's no way to style those arrows too, but I don't know how to add their functionality as a increaser and decreaser
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
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
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
pointer-event: none; made my day, thank you master ❤️
you saved my day and my mental health in one move, god bless you .
Scrimba is great, not just to learn, practice every moment.
Thanks again for making such incredible video.
pointer-events: none. that was a life saver.
Appreciate your content so much that I don't skip a lot of the ads on your videos. 😄
I came for the tshirt, stayed for the content 😎
Awesome. I was looking for this for many days
pointer-events: none
Very nice tip.
This was a cool video. Learned a lot. And that border trick was pretty neat.
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)
Excellent...Go Ahead my dear....
Super! Always nice to see even experts have trouble with top and translate properties :D
Me: "WTF!? How I'm going to build this context tooltip? The icon is messing everything!"
Kevin: pointer-events: none;
Me: 🤯
You saved my time by pointer events property. Thank you Kevin. Much love 💕
Amazing video man. I'm a Dev jr on stack JS, and this video helps very much. Thanks and best regards from Brazil.
Excellent tutorial, thanks Kevin!
it's a real helpful.Thank you sir, for the tutorial.
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.
Please. how to change the blue background hover option??
It works like a charm, thank you!
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)
You are awesome Kevin ❤️❤️❤️
Awesome trick to create triangles thanks kevin:)
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 :(
Another Awesome trick, Thank you Kevin!
awesome video! loved it
So glad!
You are the best teacher!!!! Thank you for all your videos.
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?
Maybe you dunno but you're doing a great job and teaching a lotta people in the world! Thanks! ✨
This is great. Thank you.
You're very welcome!
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?
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.
Great tutorial! Thanks
Wow, nice and usefull video!!! Thanks for everyday's rising learning curve!
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.
Thank you Kevin. You are so helpful!
looking good on that zelda shirt
I knew this 5 years ago. it's nice you are teaching this to others :D keep it up!
pointer event, I didn't know anything about this before :D ThanQ
Thank you Kevin
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 :)
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.
i love u man i love u always when i watching your videos i always found something new bravo
Kevin: pointer-events: none;
Me: What De Fok 🤯
Thank you very much for this video.
Love this, but out of interest, do you know of a good source on how to make a completely custom select element?
I enjoy watching you ❤
Thanks for another great tutorial.
very nice. I have a question how do you style the drop down menu so that it moves slightly up?
Nice Kevin! Thanks man 👍
Excelente tutorial!
What are the meta and link tags in the beginning of the video?
My opinion is to replace these custom icons to arrow up icon from font-awesome
MDN
Permitted content for :
Zero or more or elements.
So, could not be nested with the element
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 :)
Awesome video
Great video!
Have you found a way to change the select's options background color???
Could you make video with a couple of uses for clip path? Thanks, Kevin!
How do I edit the padding of the options?
Can we style the options part of the dropdown somehow? like when we hover them or select them.
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.
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?
Is it possible to align right the items inside the select list?
Hey Kevin, any advice on how to change the placeholder color for this element??
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.
How can I make the same styling but with input and datalist?
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
How do you select all the elements inside a div that has an id called header?
Help
How to link option with page but not use card a?
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:)
Nice video !!!
very useful
Is any way available for change the active or focus background in the select list
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.
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
How to change color of selected item in this.
You can color the Option. Is that what you were asking for? Both so that the selected option looks different in the dropdown list, but also so that it looks different from others in the select box when selected.
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?
Nice. Thank you.
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.
This also works for input type="number" ? By default there's no way to style those arrows too, but I don't know how to add their functionality as a increaser and decreaser
".stepUp()" and ".stepDown()" is probably what you need there
@@patrickkaiser5505 I did find that on stackoverflow, but I didn't really understood the rest of the code properly
how to change that option hover color blue ?
very good tutorial
Is it possible to change option items design?
@15:28 ... my daily css programing
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
13:20 how do you write on three rows in same time
Depends on the editor, but in VSCode (on windows) you hold down alt while clicking to place the cursor in multiple places
@@KevinPowell Thanks !
Thankyou , I learned something interesting 😍.. can I know what theme are you using in vs code?.
How to change the options hover blue color ? Thanks In Advance...!!!
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
amaziinggg sir, but any method to change hover color on selection option items? its soo difficult for mee, pleaseee helpp 🙏😭
How to solve the fat scroll bar issue in windows?
How would you give the items a padding to make it look nicer on chrome ?
The dropdown list thing itself? Not much you can do there sadly.
Worth mentioning that *appearance* css property is experimental, not fully supported by all browsers.
Whats the screen recorder you are using ?
probably obs
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!
How to change blue color in dropdown hover?