How to Style Select Fields using CSS and Font Awesome

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:

<select>
	<option value="option-1">Option 1</option>
	<option value="option-2">Option 2</option>
	<option value="option-3">Option 3</option>
</select>
HTML

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:

<div class="select-wrapper">
	<select>
		<option value="option-1">Option 1</option>
		<option value="option-2">Option 2</option>
		<option value="option-3">Option 3</option>
	</select>
</div><!-- end .select-wrapper -->
HTML

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.

select {
	background: #F0F3FB;
	border: 1px solid #F0F3FB;
	border-radius: 4px;
	width: 100%;
	padding: 20px;
	font-size: 16px;
	color: #3F3F3F;

	/* Here's the code we need */
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	 -o-appearance: none;
		appearance: none;
}
CSS

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:

.select-wrapper {
	position: relative;	
}

.select-wrapper:after {
	font-family: FontAwesome;
  	content: '\f107';
  	font-size: 28px;
  	position: absolute;
  	top: 12px;
  	right: 20px;
  	color: #434B67;
  	pointer-events: none;
}
CSS

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:

select::-ms-expand {
  display: none;
}
CSS

And that’s it!

Just to put it all together here is the HTML / CSS you’ll need:

<div class="select-wrapper">
	<select>
		<option value="option-1">Option 1</option>
		<option value="option-2">Option 2</option>
		<option value="option-3">Option 3</option>
	</select>
</div><!-- end .select-wrapper -->
HTML
select {
	background: #F0F3FB;
	border: 1px solid #F0F3FB;
	border-radius: 4px;
	width: 100%;
	padding: 20px;
	font-size: 16px;
	color: #3F3F3F;

	/* Here's the code we need */
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	 -o-appearance: none;
		appearance: none;
}

.select-wrapper {
	position: relative;	
}

.select-wrapper:after {
	font-family: FontAwesome;
  	content: '\f107';
  	font-size: 28px;
  	position: absolute;
  	top: 12px;
  	right: 20px;
  	color: #434B67;
  	pointer-events: none;
}

select::-ms-expand {
  display: none;
}
CSS

Ready to work with us?

Let's build something badass.