How to Style Select Fields using CSS and Font Awesome

Select fields are a common form element, but they often get overlooked when it comes to styling. However, a well-styled select field can enhance the overall aesthetics of your forms and provide a more polished user experience. In this post, we’ll explore how you can leverage the power of CSS and Font Awesome to transform those boring, default select fields into visually appealing form components that seamlessly integrate with the rest of your design.

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>

By default that code looks like this:

Option 1Option 2Option 3

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 -->

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;
}

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:

Option 1Option 2Option 3

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;
}

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;
}

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 -->

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;
}

If you’re needing any assistance your web design or development feel free to reach to Icepick today!