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.