How to attach vector icon to select?

Question

css

Hello. I hope you can help me, CSS gurus.
There is a menu which is displayed by the list ul > li.
In the first li - "My purchases", everything is simple:

<li><a href="#"><span class="icon-basket"></span>Мои покупки</a></li>

The entire link area is clickable and works well.
With select, things are not so good, red shows the selection area where the mouse activates the selectbox.
What should be done to make the span only visible but not clickable? how to overlay?
HTML code for select:

<li>                    
<li>
  <span class="icon-dollar-1"></span>
  <select>
    <option disabled="" selected="selected">Валюта</option>
    <option value="wmr">Рубль</option>              
  </select>
</li>

(simplified) CSS code to place icon next to select:

li {position: relative}
.icon-dollar-1 {left:8px;position:absolute;}
li select {padding-left: 14px;}

this icon overlaps select, z-index didn't help.
Screen:

Answer 1

Use z-index to position the icon one layer below.
Or even make it a background.

Answer 2

Easiest way, use on icon

.icon-dollar-1 {
  pointer-events : none;
}

unless of course you are not confused by support with IE 11+. caniuse.com/#search=pointer-events
In general, I would reverse the select and add an icon via the &:before pseudo-element.