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.

Style Select Fields using CSS

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:

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:

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!

FAQs

How can I style select fields using CSS?

To style select fields using CSS, you can use various CSS properties and selectors. Some commonly used properties include background-color, color, font-size, border, and padding. You can target select fields using the select selector and apply styles to customize their appearance.

Can I change the default dropdown arrow in select fields?

Unfortunately, changing the default dropdown arrow in select fields is challenging due to browser restrictions. Most browsers do not allow direct customization of the dropdown arrow using CSS alone. However, there are techniques available using JavaScript or libraries like Select2 or Chosen that provide more customization options.

How can I style the dropdown list that appears when clicking on a select field?

The dropdown list that appears when clicking on a select field is controlled by the browser and has limited styling options. You can modify some properties like background-color, color, font-size, and border to customize its appearance. However, the level of customization may vary across different browsers.

Are there any CSS frameworks or libraries that can help style select fields?

Yes, there are CSS frameworks and libraries that provide pre-styled components, including select fields. Some popular options include Bootstrap, Bulma, Foundation, and Semantic UI. These frameworks offer ready-to-use styles for select fields, making it easier to customize and integrate them into your projects.

Can I apply different styles to select fields based on their states, such as hover or focus?

Yes, you can apply different styles to select fields based on their states using CSS pseudo-classes. For example, you can use :hover to target the select field when the mouse hovers over it, or :focus to target the select field when it is in focus (clicked or selected).

Nick Meagher
Nick Meagher

Nick Meagher is the founder of Icepick, a leading web design & development company based out of Fort Worth, Texas. With over 10 years of development experience in WordPress and Shopify he is passionate in helping businesses succeed online.

Ready to work with us?

Contact Us Today!

Free SEO Audit

Get a free website & SEO audit directly from our founder who will provide you with a complete review of your website on everything between technical issues to SEO recommendations!

  • This field is for validation purposes and should be left unchanged.