CSS Seleccionar estilo de flecha de cuadro

Question

Quiero eliminar la flecha predeterminada del cuadro de selección y quiero usar un icono personalizado. De las respuestas anteriores en SO, descubrí que no es posible (para que funcione con los principales navegadores). La única posibilidad es ajustar la selección dentro de un div, y establecer su ancho más que el ancho del div y el desbordamiento de configuración: oculto. Estoy intentando seguir, pero no funciona. ¿Qué estoy haciendo mal?

HTML:

<div class="selectParent"> 
    <select> 
      <option value="1">Option 1</option> 
      <option value="2">Option 2</option>   
    </select> 
</div> 

CSS:

.selectParent{ 
    width:80px; 
    overflow:hidden; 
} 

.selectParent select{ 
    width:100px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    padding: 2px 30px 2px 2px; 
    border: none; 
    background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center; 
} 

jsFiddle: http://jsfiddle.net/gcPmC/

Answer 1

mira esto

lado izquierdo

http://jsfiddle.net/afshinprofe/qhCsJ/1/

lado derecho

http://jsfiddle.net/afshinprofe/qhCsJ/3/

Answer 2

tratar de reemplazar el

padding: 2px 30px 2px 2px; 

con

padding: 2px 2px 2px 2px; 

Se debe trabajar.