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!

[@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

[@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

[@ThiagoVieira91]

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

[@mrabhijitrabha]

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

[@bijayaadhikari442]

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

[@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)

[@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.

[@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 😎

[@mostafagh3573]

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

[@md.mirazuddin364]

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

[@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. 😄

[@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.

[@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?

[@elvingonzalez8932]

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

[@zvelkimD]

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

[@arseneawounou180]

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

[@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.

[@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 :(

[@user-ek7nj4vz1k]

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

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

[@viktorbublic]

This is great. Thank you.

[@KevinPowell]

You're very welcome!

[@segsfault]

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

[@Avinash.i1Brand]

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

[@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.

[@Markor91]

It works like a charm, thank you!

[@captaindesign]

Excellent tutorial, thanks Kevin!

[@khalilmahmoodiyan975]

Awesome. I was looking for this for many days

[@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.

[@giorgimindiashvili3810]

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

[@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)

[@MsElsospechoso28]

looking good on that zelda shirt

[@AjayKumar-pn5yy]

You are awesome Kevin ❤️❤️❤️

[@abdulrahmannasser1079]

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

[@seathwolf5610]

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

[@nonchalant8473]

Great tutorial! Thanks

[@waelmoh]

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

[@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.

[@bishwajitsarkar8873]

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

[@elcolo77]

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

[@ChillCityNaveen]

Awesome trick to create triangles thanks kevin:)

[@abdiasmigaud2647]

Thank you very much for this video.

[@mdyousufgazi4030]

awesome video! loved it

[@KevinPowell]

So glad!

[@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

[@azhardanii]

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

[@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.

[@bahaajasim3793]

Thank you Kevin

[@miracleio8555]

Another Awesome trick, Thank you Kevin!

[@muralidharan4216]

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

[@glenn4140]

Thank you Kevin. You are so helpful!

[@lukedorny]

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

[@nickwoodward819]

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

[@j.almadhaji]

I enjoy watching you ❤

[@jaswanthsimha1418]

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

[@johnmclane9851]

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.

[@KevinPowell]

It'll be uploaded!

[@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

[@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

[@dev4SEO]

Thanks. I really enjoyed this one

[@gethermedel3620]

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

[@peetboy]

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

[@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?

[@clevermissfox]

Hmm I wonder why my dropdown menu with the options still looks tge same even if change the background or the accent color on the select element. I've achieved everything else but this.

[@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

[@phandikhang9668]

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

[@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.

[@presidiun]

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

[@onur-9158]

how to change that option hover color blue ?

[@shulehr]

very good tutorial

[@vojislavdjuric8856]

Nice. Thank you.

[@newentu]

Excelente tutorial!

[@m2kdevelopments]

Awesome video

[@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?

[@anuj7286]

Sir thankyou so much, can you please make a video on how to style checkbox in bootstrap?

[@jellycrackersmerch8221]

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

[@cintron3d]

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.

[@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.

[@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

[@Endrit719]

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

[@rayansh1245]

thank you sir

[@Darkray201]

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]

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😅

[@MyDistortedWorld]

Nice Kevin! Thanks man 👍

[@benjaminhammond7925]

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

[@anamazanova]

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

[@maneeshrockx667]

Thankyou , I learned something interesting 😍.. can I know what theme are you using in vs code?.

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

[@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. :)

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

[@pawejurgielewicz7892]

Geat video as always! I just have a little question: how can you use Firefox and Chrome simultaneously via Live Server in VScode?

[@migueldomingos4570]

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

[@VenkateshMps]

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

[@JuryOfficialUK]

padding on select wont work on Safari :(

[@KlaudiusL]

@15:28 ... my daily css programing

[@ralphmartynsamaniego7017]

Do another one for Radio and Check boxes as well! :D Great video btw!

[@parthosarkar5270]

How do I edit the padding of the options?