DEV Community

Cover image for Custom Select Styles with Pure CSS

Custom Select Styles with Pure CSS

Stephanie Eckles on August 15, 2020

This is episode #20 in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer...
Collapse
 
tterb profile image
Brett Stevenson

This is a really great explanation and walkthrough!
After recently being tasked with creating a custom select component for a large React application, I can whole-heartedly appreciate a pure CSS approach.

Collapse
 
5t3ph profile image
Stephanie Eckles

Thanks!

Collapse
 
jwp profile image
John Peters

Stephanie;
Is there any way to style the option hover property to change color from blue to other color?

Collapse
 
5t3ph profile image
Stephanie Eckles

For the multiple select you can change it for Chrome and Firefox but currently it has no effect on Chrome. The CodePen has an example of how to do it! Let me know if I misunderstood your question!

Collapse
 
jwp profile image
John Peters

Thanks Steph, that's what I found, Chrome doesn't allow it to happen. Just another reason to avoid 3rd party libraries that do it in other ways as it locks into using them. Not all bad if that component is simple and easy to use.

Collapse
 
waylonwalker profile image
Waylon Walker

Fantastic, styling select boxes can get confusing. I will definitely reference this next time I need to do so.

Collapse
 
5t3ph profile image
Stephanie Eckles

Awesome, thanks!

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

I like these! They will be helpful while creating a new project from where we need custom select styles!

Collapse
 
5t3ph profile image
Stephanie Eckles

Yay! I left the initial style very basic but you can really customize it from this starting point πŸš€

Collapse
 
simmetopia profile image
Simon Bundgaard-Egeberg

What a nice set of blogs you have written. A joy to read, and I learn neat tricks everytime. Thank you for sharing your knowledge! πŸ₯³

Collapse
 
5t3ph profile image
Stephanie Eckles

Thanks for letting me know you find these articles useful! πŸ™Œ