How to Style Your Select Boxes

  Tabs, Menu


Your select boxes can be an incredibly functional element on your website. Here's how to style it to match the rest of your website's branding elements.

How to Style Your Select Boxes

Default select boxes are pretty minimal. They can be one of the most functional parts of a website. Select boxes give your website visitors a better way to narrow down large quantities of information and direct them to where they need to go. 

Styling select boxes to match your brand is one of those details that creates a comprehensive look. However, select boxes are notoriously difficult to style. This tutorial gives you some easy ways to update your select box's look -- even if it's something as simple as ensuring the accent colors of the select box blend with the color scheme used throughout the brand.

Here's how to style your select boxes to fit with your website's overall theming and brand aesthetic.

HTML

Select boxes are quite hard to style, so some extra HTML is needed including wrapping everything in a "group" class so that we have elements to target with CSS:

CSS

The CSS works by using the before and after pseudo classes to create custom elements. The after class, in particular, is how we're able to styling the dropdown arrow:

Want to see how it all looks before committing to its use? Check out the JSFiddle below. Hover over the background images to see the hover effect. Be sure to scale your browser windows to various sizes to see how these sections would look on mobile display.

Author

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.