Wie man Select-Elemente werden Transparent in Chrom?

Bitte schauen Sie dieses Beispiel:

CSS:

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

HTML:

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

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

Kann das bitte mal jemand aktualisieren, damit Sie transparent in Chrom? Derzeit das Ergebnis im FF richtig ist. Danke.

Update:

Nun ohne -webkit-appearance: none; funktioniert gut in Chrome.

  • Der jsfiddle-link funktioniert nicht. Können Sie bitte aktualisieren?
  • Aktualisiert die fiddle-link, die Antwort ist -webkit-appearance: none; aber es ist nicht mehr nötig, für die aktualisierte Chrome.
InformationsquelleAutor Jeaf Gilbert | 2010-11-10
  1. 52

    CSS:

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

    HTML:

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

    Nicht getestet auf firefox, aber es scheint -webkit-appearance: none; deaktiviert bestimmte Verhaltensweisen webkit anwenden können.

    • +1 schönes! gut zu wissen, über diese ..
    • Wie ein Zauber funktioniert, danke! 🙂
    • Danke! dass gerade gespeichert haben mir ein paar Stunden der frustration. +1
    InformationsquelleAutor MatTheCat
Schreibe einen Kommentar