Как сделать выбранный элемент прозрачным в Chrome?

Question

Пожалуйста, посмотрите этот пример:

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/

Может кто-нибудь обновить его, чтобы он был прозрачным в Chrome?В настоящее время результат в FF является правильным.Спасибо.

Обновление:

Теперь без -webkit-appearance: none; отлично работает в Chrome.

Answer 1

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

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

Не тестировался на Firefox, но, похоже, -webkit-appearance: none; отключает определенные поведения, которые может применить webkit.