quitar flecha de select

[nades]

Hola!
Quisiera saber si existe alguna forma de esconder la flecha de dos select hechos en html.

Código Javascript:

function Combos(x) {
  ItDepend=document.getElementById('delegacion');
  if(!ItDepend){return;}                 
  var mitems=new Array();
  mitems['Estado']=['DELEGACIÓN'];
  mitems['Distrito Federal']=['ÁLVARO OBREGÓN','AZCAPOTZALCO', 'BENITO JUÁREZ', 'COYOACÁN', 'CUAJIMALPA', 'CUAUHTÉMOC', 'GUSTAVO A. MADERO', 'IZTACALCO', 'IZTAPALAPA', 'MAGDALENA CONTRERAS', 'MIGUEL HIDALGO', 'MILPA ALTA', 'TLÁHUAC', 'TLALPAN', 'VENUSTIANO CARRANZA', 'XOCHIMILCO'];
  ItDepend.options.length=0;
  ItActual=mitems[x.options[x.selectedIndex].value];
  if(!ItActual){return;}
  ItDepend.options.length=ItActual.length;
  for(var i=0;i<ItActual.length;i++) {
    ItDepend.options[i].text=ItActual[i];
    ItDepend.options[i].value=ItActual[i];
  }
}
 

Código CSS:

.estado {
    width:250px;
    height:40px;
    color:#AB1B8C;
    font-weight:bold;
    border:none !important;
    margin-top:5px;
    padding-left:10px;
    background-color:transparent;
    background-image:url(../images/estado.png);
}
.delegacion {
    width:230px;
    height:40px;
    color:#AB1B8C;
    font-weight:bold;
    border:none !important;
    margin:5px 0 0 0;
    padding-left:10px;
    background-color:transparent;
    background-image:url(../images/delegacion.png);
}
 

Código HTML:

<select class="estado" name="estado" id="estado" onchange="Combos(this)">
<option value="Estado">ESTADO</option>
<option value="Distrito Federal">DISTRITO FEDERAL</option>
</select>
<select class="delegacion" name="delegacion" id="delegacion">
<option value="Delegación">DELEGACIÓN</option>
</select>
 

Este es el código que actualmente tengo. Los select son dependiente y el estilo me lo toma bien, el único inconveniente es que la flecha del select no logro eliminarla. Alguien pudiera darme algún tip.

Mi resultado es algo parecido a esto
http://codepen.io/webifish/full/ibFwj

Gracias