Styling Select Boxes With CSS: A New Approach for your eCommerce Site
By Mike McRoy, Applications Engineer
Undoubtedly many of your eCommerce sites are filled with select boxes; customers may need to choose sizes for clothes with a drop down menu or indicate what state from a list they need their order shipped to, and using select boxes makes this possible. However, if you’re a developer, you know that styling these boxes can be difficult, especially across different browsers. But with the following style approach using CSS, you can make styling select boxes a little easier and more efficient.
The typical CSS approach
There is no true method for directly styling a select box with only CSS. Instead developers style them with a fake layer above it or, as I like to call it, a façade.
The typical method for styling a select box with CSS involves a few things:
- Remove default styles from the select
- Put a wrapper div around the select
- Make the select 110% width with overflow hidden to hide the default arrow
- Proceed to style a façade over the select
- Create an arrow for the select as an image
- Apply that arrow image as the background image and position it
A new method for styling with CSS
While the above method works fine, I think there is a better method that can be used. This method follows all of the original implementation steps except for the last few parts involving the arrow.
The new method for styling:
- Remove default styles from the select
- Put a wrapper div around the select
- Make the select 110% width with overflow hidden to hide the default arrow
- Create a before and an after pseudo element
- Use the before pseudo element to style the look of the select
- Use the after to style the arrow
This method eliminates the use of background images and ultimately creates a more efficient styling method. Using the two pseudo elements to style the select also allows for a lot more variation and control over your styles without the need to create any images. No images allows for a more crisp and professional looking element across all devices.
One thing to note with this method is that it does not work with versions of IE below 10. So if you intend on supporting version below IE 10, you will want to either have a fallback in place for IE 9 and below or not use this method.
The CSS vs. JavaScript approach
Some may argue that you can achieve a better result visually using JavaScript to style select boxes. However, the front end JavaScript needed to style select boxes using this approach is not supported for mobile devices. This means the site will not trigger your styled select box, but rather the default menu on mobile devices. Also, as with any JavaScript, there can be reduction in site performance compared to using only CSS to achieve the desired look.
Want to learn how LYONSCG can maximize your online potential? Contact us.
Mike McRoy is an Applications Engineer on the LYONSCG eCommerce Implementation team, and has been working with Demandware since November 2014. Mike is a certified Demandware Developer and started his career in web development in 2003 launching a local freight truck hardware distributor site.
