How do I style a SELECT dropdown using CSS?

Tips and tricks from Tamara Olson Designs

A CSS snippet to keep handy. Note that the select needs a wrapper with the class (select-wrapper) for the down arrow to be placed, and FontAwesome needs to be pre-loaded.

.select-wrapper { position: relative; display: inline-block; margin: 0 auto; }
.select-wrapper select { display: block; letter-spacing: 1px; text-decoration: none; text-align: right; vertical-align: 0px; background-color: transparent; padding: 8px 36px 8px 16px; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: 1px solid #9FAD3E; border-radius: 0; width: auto; }
.select-wrapper::after { right: 10px; top: 0; position: absolute; margin: 12px 0 0 -20px; content: " \2193"; color: #593e36; }

Share Your Thoughts

About the Author


Tamara Olson is a self-employed UX designer and WordPress developer living in New York City.