Styling a select with CSS

Styling HTML form elements like select dropdowns, radio buttons and check boxes can be tricky as all browsers treat them differently. While there are many javascript plugins for this purpose they are really not worth the hit to performance or accessibility problems that arise.

So, without further ado, here's a way to style a <select> using only css.

The trick lies in wrapping the <select> in a <span> (although a <div> will also be fine if we set its display property to inline-block.)

<span class="select-span">
<option value="">Select an option</option>
<option value="1">Option one</option>
<option value="1">Option two</option>

Now that we have the HTML structure we can start styling it (using SCSS). First the <span>.

.select-span {
display: inline-block;
height: 30px;
max-width: 480px;
position: relative;
vertical-align: middle;
width: 100%;

border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #808080 transparent transparent transparent;
content: "";
display: block;
height: 7px;
pointer-events: none;
position: absolute;
width: 0;
right: 15px;
top: 50%;
z-index: 10;

This is fairly straightforward. We set a few properties on the <span> the most important being, display and position properties. display:inline-block will allow us to add width, height, padding and margin values if required, and position: absolute will make positioning our pseudo-element easy.

The ::after pseudo-element allows us to add a design element to our select. In this case we are creating a a downwards arrow using the border property. (If you are interest in this technique see the Shapes with border section of Working with Shapes in Web Design at CSS Tricks.) The CSS here is also straightforward. Position the pseudo-element