Style Select Element Using Only CSS | Custom Select Box

Подписаться 3,6 тыс.

Просмотров 46 тыс.

50% 1

🎥🔥 UPDATE + FIX Icon not clickable + Color options: • Style Select Element a...
💻 Get the Source Code and support the channel ❤️: www.buymeacoffee.com/fabiomus...
⬇️ LEARN ON THE BEST LEARNING PLATFORMS (LINKS BELOW) 😉💪 ⬇️
💻 My Source Codes: www.buymeacoffee.com/fabiomus...
☕ Buy me a coffee: www.buymeacoffee.com/fabiomus...
😍 One-off donation: www.paypal.me/FabioMusanni/
SKILLSHARE
(Web Dev, UI/UX Design, Python, Music, Art, Animation and a lot more)
🔗 skillshare.eqcm.net/5gxzD2 (Affiliate)
COURSERA WEB DEVELOPMENT
(Full Stack, Front-End, Back-End, Web Design and a lot more):
🔗 imp.i384100.net/EKWxBW (Affiliate)
DATACAMP
(Python, ChatGPT, SQL, Power BI, and more)
🔗 datacamp.pxf.io/vN1bDj (Affiliate)
COURSERA PYTHON
(For beginners, Data Science, Data Analysis, AI, Cybersecurity and a lot more):
🔗 imp.i384100.net/k0Nk60 (Affiliate)
Learn how to style the select element and make your custom select box using CSS only.
🎥Web Dev Playlist: • 💻 Web Development Play...
If the video was helpful, let me know in the comments down below and also like the video so that other people can see it. Needles to say I really appreciate your support 💪❤️
📨 SUBSCRIBE so that you don't miss any new video:
ru-vid.com...
🤗 BIO PAGE (contacts, etc): solo.to/fabiomusanni
Create Your Bio Page (10% OFF Upgraded Plans 😉): solo.to/inv/NDE4NzE2
🔗 RELATED CONTENT (videos, playlists, etc) 🔗
Web Dev Playlist: • 💻 Web Development Play...
🤩 AFFILIATE LINKS 🤩
Create Your Bio Page (10% OFF Upgraded Plans): solo.to/inv/NDE4NzE2
🧑🏻‍💻 ABOUT ME 🧑🏻‍💻
I'm Fabio, I started programming with Python a lot of years ago and I fell in love with this world.
I started this RU-vid channel to help you during your own journey and I hope that my help can make you an amazing programmer who loves this world as I do.
Welcome on board!! 🚀
#webDevWithFabioMusanni #css #webdevelopment #webdev #css3 #csstutorial

Наука

Опубликовано:

26 окт 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 40

@FabioMusanni Год назад

⚠ 🎥 *UPDATE + FIX Icon not clickable + Color options:* ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0ZXe6KEGPNM.html 💻 *Source Code New Video Update:* www.buymeacoffee.com/fabiomusanni/e/183144 ⬇️ *LEARN ON THE BEST LEARNING PLATFORMS (LINKS BELOW)* 😉💪 ⬇️ ☕ *Buy me a coffee:* www.buymeacoffee.com/fabiomusanni ❤️ *Support me monthly:* www.patreon.com/FabioMusanni 😍 *One-off donation:* www.paypal.me/FabioMusanni/ *SKILLSHARE* _(Web Dev, UI/UX Design, Python, Music, Art, Animation and a lot more)_ 🔗 skillshare.eqcm.net/5gxzD2 (Affiliate) *COURSERA WEB DEVELOPMENT* _(Full Stack, Front-End, Back-End, Web Design and a lot more):_ 🔗 imp.i384100.net/EKWxBW (Affiliate) *DATACAMP* _(Python, ChatGPT, SQL, Power BI, and more)_ 🔗 datacamp.pxf.io/vN1bDj (Affiliate) *COURSERA PYTHON* _(For beginners, Data Science, Data Analysis, AI, Cybersecurity and a lot more):_ 🔗 imp.i384100.net/k0Nk60 (Affiliate) Thank you for the support!❤ 🎥All my videos about web dev: ru-vid.com/group/PLs8qUrmRvaR3_p-UwLFvQ2NySkORSYUiB

@yasirtahirkheli74 28 дней назад

The super best one out there....simple and elegant....liked and subscribed...😍

@FabioMusanni 26 дней назад

Thank you for the kind comment! Glad you liked the video! 😍😊

@Avinash.i1Brand Год назад

It's useless because when we click on that favicon, we're not getting drop-down. As result that that down icon is only for styling but drop-down isn't coming. I still liked your video.. just add pointer-events: none to icon container.. that will make this work

@FabioMusanni Год назад

⚠ 🎥 *UPDATE + FIX Icon not clickable + Color options:* ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0ZXe6KEGPNM.html Hello 😊 I never actually click on the icon when I see a select element 😁 I always click on the text in the middle to see the options, so I didn't really worry about that. Thanks for pointing that out and for the solution! 💪🤗

@Avinash.i1Brand Год назад

@@FabioMusanni Yeah bro clicking on text isn't a problem for you or me as we're developers. But we have to think from user's point of view. They're not techy you know

@FabioMusanni Год назад

@@Avinash.i1Brand I've added a pinned comment with your solution! Thanks again! 💪😉

@Avinash.i1Brand Год назад

@@FabioMusanni Great bro. I hope all the viewers who watch your video they will find the answer of their problems. And please keep marking more videos. Your videos are great. 👍👍

@MichaelShingo Год назад

My thought exactly, I instinctively click on the arrow for the menu. Thanks for the quick solution

@yashashwini1735 3 месяца назад

Video was so helpful. Thank you.

@FabioMusanni 3 месяца назад

Thank you for the comment! Glad it was helpful! 😊😊

@DG-cd3jb 11 месяцев назад

It’s very information. I have a quick question here, how to call a google city list api and auto populate to the dynamic dropdown in the UI like City, state and country dropdown fields?

@FabioMusanni 10 месяцев назад

That is definitely more complex, you need to use Javascript to get the data, create all the elements with the right values and add them to the right element. When it comes to more complex applications with dynamic data etc, you might want to have a look at React for example, in that case you can use components and the whole thing could be easier, but of course, you need to learn React first.

@priyadharshinimuthukumar8970 6 месяцев назад

thanks a lot....its really helpful

@FabioMusanni 6 месяцев назад

Thank you for the comment! 😍☀ Make sure you check out the update here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0ZXe6KEGPNM.html

@blackpurple9163 9 месяцев назад

If you used :after ang put icon in that would that be better?

@FabioMusanni 9 месяцев назад

Hello, thank you for the comment! 😊 Yes, you could do it that way, it's just a matter of preference in my opinion. I like to have the icon in the HTML because it feels clearer to me (you don't need to go through the CSS to find the icon, if that makes sense). Having said that, as I always say, there is not one single right way to do something, especially in this field, as long as the end result is good and the code is clear and maintainable, do what's best for you 😉💪

@blackpurple9163 9 месяцев назад

@@FabioMusanni yes, I was just asking that since I use tailwind and react so I try to convert normal html, js and css into jsx to see if I can replicate the functionality

@ankanexe Год назад

how to change the background color of this options?

@FabioMusanni Год назад

Hello 😊 Unfortunately you can't do much to style the options. Their style is dictated by the operating system.

@Ignite_Your_Spark Год назад

Nice video and awesome personality too❤️.. please make more videos!.. thumbs up from me!👍🏽

@FabioMusanni 9 месяцев назад

I didn't see this comment! Thank you so so much for the kind words! 😍😍 I'm going to post more Web Development videos soon, so stay tuned! 💪😎

@mohitpatil4365 Месяц назад

I coded here but it's not working

@mohitpatil4365 Месяц назад

and i am trying to in react js and i converted this code in react help of with chatgpt but its not working

@mikasaace 3 месяца назад

But i cannot click on the icon to open the dropdown

@FabioMusanni 3 месяца назад

Hello, I actually made a new complete video where I also fixed that. Have a look here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0ZXe6KEGPNM.html 😊😊

@PeriklesPeriklesoglu 8 месяцев назад

thank you

@FabioMusanni 8 месяцев назад

Thank you for taking the time to leave a comment 😊💪

@gustavogustavo756 Год назад

there´s a problem where none of the icons works, I don´t know what to do :(

@FabioMusanni Год назад

I don't really know what causes this, it's never happened to me before and it shouldn't happen if you follow the video carefully. Make sure you are writing the right path to the image.

@gustavogustavo756 Год назад

@@FabioMusanni I already solved the problem, it was an error in the name of one of the folders, thank you for the answer :D

@FabioMusanni Год назад

@@gustavogustavo756 Glad to hear that! Well done! 💪🔥