Come rendere l'elemento di selezione essere trasparente in Chrome?

Question

Si prega di guardare questo esempio:

select { 
 
    width: 172px; 
 
    height: 22px; 
 
    padding: 2px 7px; 
 
    border: none; 
 
    background: url(http://imgur.com/MJyZM.png) 0 0 no-repeat; 
 
}

<select> 
 
    <option value="abcdefg">abcdefg</option> 
 
    <option value="1234567">1234567</option> 
 
    <option value="abcdefg">abcdefg</option> 
 
</select>

https://jsfiddle.net/jeafgilbert/wz0zaev0/

Qualcuno può aggiornare per essere trasparente in Chrome? Attualmente il risultato in FF è corretto. Grazie.

Aggiornamento:

Ora, senza -webkit-appearance: none; funziona bene in Chrome.

Answer 1

<select> 
    <option value="abcdefg">abcdefg</option> 
    <option value="1234567">1234567</option> 
    <option value="abcdefg">abcdefg</option> 
</select> 

select { 
    width:192px; 
    padding:2px; 
    border:none; 
    background:url(http://imgur.com/MJyZM.png) 0 0 no-repeat; 
    -webkit-appearance: none; 
} 

Non testato su Firefox ma sembra -webkit-appearance: none; disabilita specifici comportamenti WebKit può applicare.