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!
@andriilukianenko81062 жыл бұрын
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
@TomAinsworth9411 ай бұрын
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
@ThiagoVieira914 жыл бұрын
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 ❤️
@bijayaadhikari4424 жыл бұрын
Scrimba is great, not just to learn, practice every moment.
@s.fofandi4 жыл бұрын
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)
@mke76054 жыл бұрын
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.
@MikeyRussell884 жыл бұрын
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?
@pablowbk4 жыл бұрын
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.mirazuddin3643 жыл бұрын
Thanks again for making such incredible video. pointer-events: none. that was a life saver.
@abnerwillys4 жыл бұрын
Amazing video man. I'm a Dev jr on stack JS, and this video helps very much. Thanks and best regards from Brazil.
@yitzchaksviridyuk9323 жыл бұрын
Appreciate your content so much that I don't skip a lot of the ads on your videos. 😄
@MohammadAbdulHyeShaon4 жыл бұрын
Excellent...Go Ahead my dear....
@arsaurabh60442 жыл бұрын
This was a cool video. Learned a lot. And that border trick was pretty neat.
@chrisj.26114 жыл бұрын
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.
@mattmarkus48682 жыл бұрын
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?
@elvingonzalez89325 ай бұрын
Please. how to change the blue background hover option??
@zvelkimD4 жыл бұрын
Super! Always nice to see even experts have trouble with top and translate properties :D
@arseneawounou1804 жыл бұрын
Maybe you dunno but you're doing a great job and teaching a lotta people in the world! Thanks! ✨
@manosmenexis31604 жыл бұрын
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.
@kiliusz4 жыл бұрын
pointer-events: none Very nice tip.
@DavidAshby13 жыл бұрын
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 ?
@_Valentin2 жыл бұрын
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
@nickwoodward8192 жыл бұрын
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 :)
@viktorbublic4 жыл бұрын
This is great. Thank you.
@KevinPowell4 жыл бұрын
You're very welcome!
@segsfault3 жыл бұрын
Kevin: pointer-events: none; Me: What De Fok 🤯
@Avinash.i1Brand Жыл бұрын
You saved my time by pointer events property. Thank you Kevin. Much love 💕
@bhalchandragaikwad16054 жыл бұрын
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
@GSYSYT4 жыл бұрын
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!
@captaindesign4 жыл бұрын
Excellent tutorial, thanks Kevin!
@khalilmahmoodiyan97510 ай бұрын
Awesome. I was looking for this for many days
@lucass.p95794 жыл бұрын
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.
@adao53083 жыл бұрын
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__beck4 жыл бұрын
You have the best shirts, Kevin!
@KevinPowell4 жыл бұрын
Thanks, this is def. one of my favourites :)
@BloodyClash4 жыл бұрын
oooh. just noticed...is that a zelda shirt ?
@c__beck4 жыл бұрын
@@BloodyClash it is!
@BloodyClash4 жыл бұрын
@@c__beck Cool. I love Zelda Stuff (maybe not the biggest fan in the world but still love it)
@MsElsospechoso284 жыл бұрын
looking good on that zelda shirt
@AjayKumar-pn5yy2 жыл бұрын
You are awesome Kevin ❤️❤️❤️
@abdulrahmannasser10793 жыл бұрын
My opinion is to replace these custom icons to arrow up icon from font-awesome
@seathwolf56104 жыл бұрын
You are the best teacher!!!! Thank you for all your videos.
@nonchalant84734 жыл бұрын
Great tutorial! Thanks
@waelmoh4 жыл бұрын
pointer event, I didn't know anything about this before :D ThanQ
@RobertFerentz3 жыл бұрын
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.
@bishwajitsarkar887310 ай бұрын
it's a real helpful.Thank you sir, for the tutorial.
@elcolo772 жыл бұрын
Wow, nice and usefull video!!! Thanks for everyday's rising learning curve!
@ChillCityNaveen4 жыл бұрын
Awesome trick to create triangles thanks kevin:)
@abdiasmigaud2647 Жыл бұрын
Thank you very much for this video.
@mdyousufgazi40304 жыл бұрын
awesome video! loved it
@KevinPowell4 жыл бұрын
So glad!
@JamesWelbes4 жыл бұрын
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
@azhardanii2 жыл бұрын
amaziinggg sir, but any method to change hover color on selection option items? its soo difficult for mee, pleaseee helpp 🙏😭
@fayazvar39484 жыл бұрын
How to change color of selected item in this.
@johanlarsson98054 жыл бұрын
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.
@bahaajasim37932 жыл бұрын
Thank you Kevin
@miracleio85554 жыл бұрын
Another Awesome trick, Thank you Kevin!
@muralidharan42162 жыл бұрын
How to change the options hover blue color ? Thanks In Advance...!!!
@glenn41403 жыл бұрын
Thank you Kevin. You are so helpful!
@lukedorny4 жыл бұрын
Could you make video with a couple of uses for clip path? Thanks, Kevin!
@nickwoodward8192 жыл бұрын
Love this, but out of interest, do you know of a good source on how to make a completely custom select element?
@j.almadhaji4 жыл бұрын
I enjoy watching you ❤
@jaswanthsimha14182 жыл бұрын
How do you select all the elements inside a div that has an id called header?
@johnmclane98514 жыл бұрын
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.
@KevinPowell4 жыл бұрын
It'll be uploaded!
@zlackbiro4 жыл бұрын
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
@dev4SEO3 жыл бұрын
Thanks. I really enjoyed this one
@gethermedel36204 жыл бұрын
I knew this 5 years ago. it's nice you are teaching this to others :D keep it up!
@peetboy4 жыл бұрын
Worth mentioning that *appearance* css property is experimental, not fully supported by all browsers.
@shaunbowen4 жыл бұрын
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?
@clevermissfox10 ай бұрын
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.
@mattwood86594 жыл бұрын
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?
@texno54403 жыл бұрын
not this js
@phandikhang96682 жыл бұрын
Help How to link option with page but not use card a?
@vladislav.c3 жыл бұрын
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.
@presidiun3 жыл бұрын
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 ?
@shulehr2 жыл бұрын
very good tutorial
@vojislavdjuric88567 ай бұрын
Nice. Thank you.
@newentu Жыл бұрын
Excelente tutorial!
@m2kdevelopments3 жыл бұрын
Awesome video
@SunilKumar-jc5cb4 жыл бұрын
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?
@anuj72864 жыл бұрын
Sir thankyou so much, can you please make a video on how to style checkbox in bootstrap?
@jellycrackersmerch82212 жыл бұрын
how can I just add the name Menu next to my three lines?
@cintron3d4 жыл бұрын
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.
@tostuk25282 жыл бұрын
What are the meta and link tags in the beginning of the video?
@abstrxtinfinity2 жыл бұрын
Can we style the options part of the dropdown somehow? like when we hover them or select them.
@vojka29734 жыл бұрын
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
@Endrit7193 жыл бұрын
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
@rayansh12452 жыл бұрын
thank you sir
@Darkray2013 жыл бұрын
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😅
@MyDistortedWorld4 жыл бұрын
Nice Kevin! Thanks man 👍
@benjaminhammond79254 жыл бұрын
Have you found a way to change the select's options background color???
@anamazanova3 жыл бұрын
Hey Kevin, any advice on how to change the placeholder color for this element??
@maneeshrockx6674 жыл бұрын
Thankyou , I learned something interesting 😍.. can I know what theme are you using in vs code?.
@neo4now4 жыл бұрын
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:)
@manishmohite71644 жыл бұрын
Nice video, can you please help me out on how to design a website bottom left pop up box banner rectangular sized...
@KevinPowell4 жыл бұрын
That's pretty specific! Maybe jump into my community (link in description) and ask for help, show us what you have already, etc. :)
3 жыл бұрын
How can I make the same styling but with input and datalist?
@pawejurgielewicz78924 жыл бұрын
Geat video as always! I just have a little question: how can you use Firefox and Chrome simultaneously via Live Server in VScode?
@migueldomingos45704 жыл бұрын
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
@VenkateshMps4 жыл бұрын
Is any way available for change the active or focus background in the select list
@JuryOfficialUK2 жыл бұрын
padding on select wont work on Safari :(
@KlaudiusL4 жыл бұрын
@15:28 ... my daily css programing
@ralphmartynsamaniego70174 жыл бұрын
Do another one for Radio and Check boxes as well! :D Great video btw!