Custom select menu - CSS only

[@RANKKY9]

Kevin: pointer-events: none; Me: 🤯🤯🤯

[@kenny123451]

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]

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

[@andriilukianenko8106]

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

[@mostafagh3573]

you saved my day and my mental health in one move, god bless you .

[@bijayaadhikari442]

Scrimba is great, not just to learn, practice every moment.

[@mrabhijitrabha]

pointer-event: none; made my day, thank you master ❤️

[@ThiagoVieira91]

Me: "WTF!? How I'm going to build this context tooltip? The icon is messing everything!" Kevin: pointer-events: none; Me: 🤯

[@s.fofandi]

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)

[@MikeyRussell88]

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?

[@pablowbk]

I came for the tshirt, stayed for the content 😎

[@md.mirazuddin364]

Thanks again for making such incredible video. pointer-events: none. that was a life saver.

[@mke7605]

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.

[@manosmenexis3160]

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.

[@kiliusz]

pointer-events: none Very nice tip.

[@abnerwillys]

Amazing video man. I'm a Dev jr on stack JS, and this video helps very much. Thanks and best regards from Brazil.

[@yitzchaksviridyuk932]

Appreciate your content so much that I don't skip a lot of the ads on your videos. 😄

[@khalilmahmoodiyan975]

Awesome. I was looking for this for many days

[@MohammadAbdulHyeShaon]

Excellent...Go Ahead my dear....

[@arsaurabh6044]

This was a cool video. Learned a lot. And that border trick was pretty neat.

[@chrisj.2611]

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.

[@bishwajitsarkar8873]

it's a real helpful.Thank you sir, for the tutorial.

[@zvelkimD]

Super! Always nice to see even experts have trouble with top and translate properties :D

[@captaindesign]

Excellent tutorial, thanks Kevin!

[@Markor91]

It works like a charm, thank you!

[@elvingonzalez8932]

Please. how to change the blue background hover option??

[@viktorbublic]

This is great. Thank you.

[@KevinPowell]

You're very welcome!

[@ChillCityNaveen]

Awesome trick to create triangles thanks kevin:)

[@giorgimindiashvili3810]

i love u man i love u always when i watching your videos i always found something new bravo

[@elcolo77]

Wow, nice and usefull video!!! Thanks for everyday's rising learning curve!

[@seathwolf5610]

You are the best teacher!!!! Thank you for all your videos.

[@c__beck]

You have the best shirts, Kevin!

[@KevinPowell]

Thanks, this is def. one of my favourites :)

[@BloodyClash]

oooh. just noticed...is that a zelda shirt ?

[@c__beck]

@@BloodyClash it is!

[@BloodyClash]

@@c__beck Cool. I love Zelda Stuff (maybe not the biggest fan in the world but still love it)

[@miracleio8555]

Another Awesome trick, Thank you Kevin!

[@AjayKumar-pn5yy]

You are awesome Kevin ❤️❤️❤️

[@nickwoodward819]

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 :)

[@glenn4140]

Thank you Kevin. You are so helpful!

[@DavidAshby1]

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]

I have the same problem and i dont understand how to fix it :(

[@mattmarkus4868]

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?

[@mdyousufgazi4030]

awesome video! loved it

[@KevinPowell]

So glad!

[@Avinash.i1Brand]

You saved my time by pointer events property. Thank you Kevin. Much love 💕

[@arseneawounou180]

Maybe you dunno but you're doing a great job and teaching a lotta people in the world! Thanks! ✨

[@nonchalant8473]

Great tutorial! Thanks

[@waelmoh]

pointer event, I didn't know anything about this before :D ThanQ

[@bhalchandragaikwad1605]

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]

You don't. It's not possible to style options in a good way. You need custom markup and JS for that.

[@abdiasmigaud2647]

Thank you very much for this video.

[@MsElsospechoso28]

looking good on that zelda shirt

[@j.almadhaji]

I enjoy watching you ❤

[@0the0ambient0]

Thanks for another great tutorial.

[@segsfault]

Kevin: pointer-events: none; Me: What De Fok 🤯

[@abdulrahmannasser1079]

My opinion is to replace these custom icons to arrow up icon from font-awesome

[@bahaajasim3793]

Thank you Kevin

[@lucass.p9579]

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]

Try using :focus {outline:none} on the property if you're still having that problem.

[@RobertFerentz]

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.

[@MyDistortedWorld]

Nice Kevin! Thanks man 👍

[@SunilKumar-jc5cb]

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?

[@newentu]

Excelente tutorial!

[@jaswanthsimha1418]

How do you select all the elements inside a div that has an id called header?

[@vojka2973]

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

How can I make the same styling but with input and datalist?

[@m2kdevelopments]

Awesome video

[@j0ca1995]

Great video!

[@tostuk2528]

What are the meta and link tags in the beginning of the video?

[@abstrxtinfinity]

Can we style the options part of the dropdown somehow? like when we hover them or select them.

[@phandikhang9668]

Help How to link option with page but not use card a?

[@muralidharan4216]

How to change the options hover blue color ? Thanks In Advance...!!!

[@azhardanii]

amaziinggg sir, but any method to change hover color on selection option items? its soo difficult for mee, pleaseee helpp 🙏😭

[@LukeDorny]

Could you make video with a couple of uses for clip path? Thanks, Kevin!

[@mohdshanu]

Is it possible to change option items design?

[@nickwoodward819]

Love this, but out of interest, do you know of a good source on how to make a completely custom select element?

[@benjaminhammond7925]

Have you found a way to change the select's options background color???

[@alf1712]

Is it possible to align right the items inside the select list?

[@Sisier]

Nice video !!! very useful

[@vladislav.c]

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.

[@parthosarkar5270]

How do I edit the padding of the options?

[@shulehr]

very good tutorial

[@VenkateshMps]

Is any way available for change the active or focus background in the select list

[@shaunbowen]

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?

[@neo4now]

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:)

[@presidiun]

very nice. I have a question how do you style the drop down menu so that it moves slightly up?

[@JamesWelbes]

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

[@АнтонФомичев-щ2ю]

MDN Permitted content for : Zero or more or elements. So, could not be nested with the element

[@mattwood8659]

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]

not this js

[@vojislavdjuric8856]

Nice. Thank you.

[@onur-9158]

how to change that option hover color blue ?

[@blackpurple9163]

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

[@patrickkaiser5505]

".stepUp()" and ".stepDown()" is probably what you need there

[@blackpurple9163]

@@patrickkaiser5505 I did find that on stackoverflow, but I didn't really understood the rest of the code properly

[@peetboy]

Worth mentioning that *appearance* css property is experimental, not fully supported by all browsers.

[@anamazanova]

Hey Kevin, any advice on how to change the placeholder color for this element??

[@digvijaychauhan2000]

Will this affect the mobile select drop down view?

[@KevinPowell]

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.

[@smsibasish]

How to solve the fat scroll bar issue in windows?

[@gethermedel3620]

I knew this 5 years ago. it's nice you are teaching this to others :D keep it up!

[@jellycrackersmerch8221]

how can I just add the name Menu next to my three lines?

[@zlackbiro]

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

[@KlaudiusL]

@15:28 ... my daily css programing

[@manishmohite7164]

Nice video, can you please help me out on how to design a website bottom left pop up box banner rectangular sized...

[@KevinPowell]

That's pretty specific! Maybe jump into my community (link in description) and ask for help, show us what you have already, etc. :)

[@q.w.e.r.t.y]

What theme extension are you using?

[@KevinPowell]

I'm using Atom Dark One... but I also use Bracket Pair Colorizer, so my brackets are different colors :)

[@mohan9285]

Pretty cool and interesting :)

[@fayazvar3948]

How to change color of selected item in this.

[@johanlarsson9805]

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.

[@burakesen4166]

How would you give the items a padding to make it look nicer on chrome ?

[@KevinPowell]

The dropdown list thing itself? Not much you can do there sadly.

[@miroslavresanovic5852]

How to change blue color in dropdown hover?

[@iUmerFarooq]

That's amazing. ❣