Not able to click on png icon on select box (as a layer) to expand select box. Not working in IE and FF

Question

I have following HTML. Where I am using selectbox. In selectbox there is down arrow which I am loading as background image from css. It is right side of selectbox. Any alternative approach apart of this. Through the css styling or something.....??????

HTML Code:

<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 file

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);
};

I have implemented this fiddle using references from stackoverflow. I am clicking on search icon on selectbox so it so after clicking on search icon it should expand select box.This solution is working with chrome only. Because of some code piece is missing this fiddle is only working with chrome. It is not working with IE and firefox. Any help with fill in the blanks.