How to Style Select Fields using CSS and Font Awesome
Nobody likes an ugly select field, I know I certainly don’t. So in order to avoid looking like Windows XP, let’s go through how we can style them to match the rest of your form fields.
Let’s go over the basic HTML markup of a select field:
By default that code looks like this:
As you can see, it could use a little love. Also, note that by default this looks different in every browser.
In order to style it, we need to tweak our HTML just a little bit. This is how we’ll set it up now:
We’ve simply added a parent div around the select tag, in a few I’ll explain why this was necessary. For now, let’s move onto styling the select field.
With the code above, your select field will now be styled exactly like a regular input field without the default browser arrow.
It’ll look something like this:
The next step is to add the arrow on the right side of the box to emulate a dropdown:
In the code above, you can now see why we needed to include the parent div around the select field. It was required so we could position the arrow correctly. I also utilized Font Awesome for down arrow icon so you could do the same if you’d like or use another font library / image.
This is what it looks like now:
The last step is to fix IE, the code above won’t remove the arrow for IE (what a surprise) so we need to add some custom CSS to fix that:
And that’s it!
Just to put it all together here is the HTML / CSS you’ll need: