Add icon font to select

Question

I am having problems with select with custom font icon, please look at this screenshot how it looks

enter image description here

Problem here is that i cant open options dropdow on click that arrow because its on select and if i add z-index: -1 arrow goes below select, but i need arrow on top of that select.

Here is my current code.

HTML

<li class="dropdown">
    <select name="font" id="font" placeholder="&#xe61d;">
        <option value="Arial">Arial</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Georgia">Georgia</option>
    </select>
</li>

CSS/Sass

select {
    @include border(0px);
    padding: 7px 0;
    position: relative;
    top: -2px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
&.dropdown {
    &:after {
        content: "\e61d";
        font-family: 'icomoon';
        color: black;
        @include abs-pos(0, 0);
    }
}

Probably this can help you? http://stackoverflow.com/questions/611482/change-color-and-appearance-of-drop-down-arrow — Christine Margraf-Hohlwegler, Jul 16 '15 at 08:39

score 1 · Accepted Answer · answered Jul 16 '15 at 08:48

I assume you problems is the click event for the select not firing when clicking the custom arrow.

Try adding this style to your arrow (I assume it is the :after element since I'm not familiar with SASS)

pointer-events: none;

This will allow you to click through the element underneath, in this case, the select

Add icon font to select

1 Answers1