Как сделать прикрепить векторную иконку к select?

Привет. Надеюсь вы мне поможете, гуру CSS.
Есть меню, которое отображается списком ul > li.
В первом li - "Мои покупки", всё просто:

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

Вся область ссылки кликабельна и работает хорошо.
С select'ом все не так хорошо, красным показана зона выделения где мышь активирует selectbox.
Что нужно сделать чтобы span был только видимым, но не кликабельным? как overlay?
HTML Код для select:

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

(упрощён) Код CSS для размещения иконки рядом с select:

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

эта иконка перекрывает select, z-index не помог.
Скрин: