Jak sprawić, by wybrany element był przezroczysty w przeglądarce Chrome?

Question

Proszę spojrzeć na ten przykład:

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/

Czy ktoś mógłby go zaktualizować być przejrzysty w Chrome? Obecnie wynik w FF jest poprawny. Dzięki.

Aktualizacja:

Teraz bez -webkit-appearance: none; działa dobrze w 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; 
} 

Nie testowane na Firefox ale wydaje -webkit-appearance: none; wyłącza konkretne zachowania WebKit mogą mieć zastosowania.