无法单击选择框（作为图层）上的png图标以展开选择框。不在IE和FF中工作

Question

我有以下HTML。我在哪里使用选择框。在selectbox中有向下箭头，我从css加载为背景图像。它是选择框的右侧。 除此之外的任何替代方法。通过css造型还是什么..... ??????

HTML代码：

<span id="label_region">Region</span>   
<span id=“dropdown_icon”></span>
<div class="select-dropdown">    
<select name="region" id="region">       
<option value="">Select Region</option>      
<option value="CS">california</option>      
<option value="DB">Denver</option>      
</select>

CSS文件

span#dropdown_icon { 
background: url('/drop-down-arrow.png') no-repeat;
width: 20px;
height: 15px;
margin-left: 16em;
position: absolute;margin-top: 1.5em;
cursor: pointer;
}

的javascript：

showDropdown = function (element) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
element.dispatchEvent(event);
};

window.runThis = function () { 
var dropdown = document.getElementById('dropdown');
showDropdown(dropdown);
};

我使用stackoverflow中的引用实现了此fiddle。我点击选择框上的搜索图标，所以在点击搜索图标后，它应该展开选择框。此解决方案仅适用于chrome。由于缺少一些代码片，这个小提琴只适用于chrome。它不适用于IE和Firefox。填补空白的任何帮助。