Comment faire pour sélectionner élément être transparent dans Chrome?

Question

S'il vous plaît regarder cet exemple:

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/

Quelqu'un peut-il s'il vous plaît le mettre à jour pour être transparent dans Chrome? Actuellement, le résultat dans FF est le bon. Merci.

Mise à jour:

Maintenant sans -webkit-appearance: none; fonctionne très bien dans 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 testé sur Firefox, mais il semble -webkit-appearance: none; désactive webkit des comportements spécifiques applicables.