Replace Select Drop Down Arrow with FontAwesome

By July 31, 2017 No Comments

I’ve seen this question a lot so here’s an example of how to replace a select drop down arrow with a fontawesome icon.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <label class="wrap"> <select name="property_type" id="property_type" class="dropdown"> <option value="" selected="selected">All Properties</option> <option value="18">Bungalow</option> <option value="77">- Detached (Chalet)</option> <option value="19">- Detached Bungalow</option> </select> </label> <style> label.wrap { width:200px; overflow: hidden; height: 50px; position: relative; display: block; border:2px solid blue; } select.dropdown{ height: 50px; padding: 10px; border: 0; font-size: 15px; width: 200px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } label.wrap:after { content:"\f13a "; font-family: FontAwesome; color: #000; position: absolute; right: 0; top: 18px; z-index: 1; width: 10%; height: 100%; pointer-events: none; } select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } </style>

Demo here

Leave a Reply