Select input with custom icon
<p>I have a select input and i have disabled the default browser appearences as follows</p>

<pre><code>select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearence: none;
}
</code></pre>

<p>I want to use a custom arrow, in order to expand and collapse to select menu. I have tried various js tricks but nothing really works just right.</p>

<p>I have considered using pure css making the select input transparent with z-index 2. Consequently the trigger would fall into place and appear as a button.</p>

<p>Here is the <a href="https://jsfiddle.net/e1qexbdn/" rel="nofollow">jfiddle</a>, but i can't make it work.</p>