CSSHTML

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