Wie kann ich den Glanz eines ausgewählten Elements in Safari auf dem Mac entfernen?

110

Auf Macs und iOS-Geräten erzeugt in Safari ein <select>Element mit einer Hintergrundfarbe einen Glanz über sich. Dies scheint in anderen Betriebssystemen nicht zu passieren.

Zum Beispiel habe ich ein Auswahlelement mit diesen Stileigenschaften:

select {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 3px 6px;
margin: 10px 0 7px;
width: 250px;
background-color: #BD2786;
color: white;
letter-spacing: -.04em;
font-weight: bold;
border: 0;
}

Und mein Element hat die gewünschte Hintergrundfarbe, aber der Glanz ist immer noch da. Weiß jemand, wie man es zu einer flachen Farbe macht?

css macos safari drop-down-menu background-color Ian Hunter
quelle

Antworten:

192

@Beanland; Du musst schreiben

-webkit-appearance:none;

in deinem css.

Lesen Sie diese http://trentwalton.com/2010/07/14/css-webkit-appearance/

Sandeep
quelle
4
Ich brauche
123
Gibt es eine Möglichkeit, den Pfeil auf der rechten Seite zu halten? Ich möchte nur die Farbe überschreiben. Vielen Dank
Marc
18
@ Sandeep: Und um es Cross-Browser zu machen:-moz-appearance: none; -webkit-appearance: none; appearance: none;
Dorian
6
@Marc Wenn Sie nach 3 Jahren immer noch interessiert sind .. Ich habe eine Lösung hinzugefügt, die ich gefunden habe, damit die Pfeile angezeigt werden.
Alicjasalamon
2
Die Lösung für IE besteht darin, select :: - ms-expand {display: none; }, um das Dropdown-Symbol für das native IE-Auswahlfeld auszublenden, und verwenden Sie dann ein aktuelles PNG-Bild als Hintergrund für das neue Symbol. Das Problem tritt auf, weil SVG-Bilder über IE im IE nicht immer richtig positioniert sind.
Phyllis Sutherland
105

Wenn Sie verwenden, -webkit-appearance:none;werden auch die Pfeile entfernt, die darauf hinweisen, dass dies ein Dropdown ist.

Sehen Sie sich dieses Snippet an, mit dem es in verschiedenen Browsern funktioniert, und fügen Sie benutzerdefinierte Pfeile hinzu, ohne Bilddateien einzuschließen:

select{
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
    /* and then whatever styles you want*/
	height: 30px; 
	width: 100px;
	padding: 5px;
}
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
Erweitern Sie das Snippet

Alicjasalamon
quelle
16
süß, schätze die Pfeile fix! hier ist eine Version mit transparentem Hintergrund: Wählen Sie {background: url (Daten: image / svg + xml; base64, PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU + LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM + PHRpdGxlPmFycm93czwvdGl0bGU + PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4 =) no-repeat 95% 50%; }
Ingo Renner
1
machte einen transparenten Pfeil (konnte hier aufgrund der Länge nicht eingefügt werden): pastebin.com/HQ0x4Rka
mga
5
Wenn Sie weit ausgewählte Elemente haben, sieht dies etwas anders aus. Um dies zu beheben, können Sie die Kantenversätze der Hintergrundposition von CSS3 verwenden, um den Hintergrund besser auszurichten. Also ersetzen no-repeat 95% 50%durchno-repeat right 2px center
iSWORD
3
Die gleichen Pfeile, aber in weiß und transparent pastebin.com/07iS41b5
Andreas Gassmann
2
Ich stelle fest, dass die hinzugefügten Pfeile sowohl einen Aufwärts- als auch einen Abwärtspfeil enthalten - eine schnelle Lösung, um nur den üblichen Abwärtspfeil anzuzeigen?
Brett
14

Version 2019

Kürzere Inline-Bild-URL, zeigt nur Abwärtspfeil, anpassbare Pfeilfarbe ...

Von https://codepen.io/jonmircha/pen/PEvqPa

Autor ist wahrscheinlich Jonathan MirCha

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
  background-size: 12px;
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  background-color: #efefef;
}
Noel Abrahams
quelle
1
Die background-colorEigenschaft gilt für den Hintergrund des Auswahlelements. Um die Farbe des fill='%23fc0000'
Noel Abrahams
Verwenden Sie die Hintergrundposition besser ohne Berechnung: Hintergrundposition: rechts .8em oben 60%; und etwas Cursor: wird benötigt
Iggy
Gibt es eine Doppelpfeilversion davon, die jemand demonstrieren kann?
Entwicklung
3

Tut mir leid, dass ich mich auf einen alten Gegenstand gestapelt habe. Ich fand hier teilweise Antworten auf meine Fragen, musste aber einige Arbeiten erledigen, um meine Ergebnisse für die nächste Person zu teilen.

Am Ende habe ich den gleichen Ansatz wie bei den anderen Mitwirkenden verwendet, aber mit ein paar Änderungen, um Folgendes zu beheben

  1. Langtext bedeckte die Pfeile in den anderen Lösungen
  2. Das verwendete Bild war ein etwas alter und hässlicher Auf- / Ab-Kombinationspfeil.

Im Folgenden finden Sie eine funktionierende Lösung, bei der die oben genannten Probleme behoben wurden. Hinweis: Ich habe für meinen Anwendungsfall einen weißen Pfeil verwendet. Möglicherweise müssen Sie die Farbe des Pfeils für Ihren ändern.

Hier ist eine Vorschau:

Mit weißem Pfeil auswählen

select{    
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaWQ9IkxheWVyXzEiICAgZGF0YS1uYW1lPSJMYXllciAxIiAgIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJkb3dubG9hZC5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjAyIj4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMjciICAgICBpZD0ibmFtZWR2aWV3NDIwMCIgICAgIHNob3dncmlkPSJmYWxzZSIgICAgIGlua3NjYXBlOnpvb209Ijg0LjMiICAgICBpbmtzY2FwZTpjeD0iMi40NzQ5OTk5IiAgICAgaW5rc2NhcGU6Y3k9IjUiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIiAvPiAgPGRlZnMgICAgIGlkPSJkZWZzNDE5MCI+ICAgIDxzdHlsZSAgICAgICBpZD0ic3R5bGU0MTkyIj4uY2xzLTJ7ZmlsbDojNDQ0O308L3N0eWxlPiAgPC9kZWZzPiAgPHRpdGxlICAgICBpZD0idGl0bGU0MTk0Ij5hcnJvd3M8L3RpdGxlPiAgPHBvbHlnb24gICAgIGNsYXNzPSJjbHMtMiIgICAgIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIiAgICAgaWQ9InBvbHlnb240MTk4IiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=) no-repeat 101% 50%;
  padding-right:20px;
}
Justin Edwards
quelle
//, Würde es Ihnen etwas ausmachen zu erklären, wie und warum dadurch der Glanz entfernt wird?
Nathan Basanese
1
Die Lösung besteht im Wesentlichen aus zwei Komponenten: 1. Fordern Sie den Browser auf, keinen Stil / keine Anzeige für das Element auszuführen. 2. Geben Sie einen angemessenen Stil an. In Browsern, die nicht schrecklich sind (lesen, nicht Safari), ist der vom Browser bereitgestellte Elementstil gut. In Safari jedoch ist der Browser-Stil ekelhaft und schrecklich. Folglich müssen wir die vom Browser bereitgestellte Anzeige in jedem Browser überschreiben. Die Zeilen, die mit dem Erscheinen enden: Keine macht Teil 1 von oben. Die anderen Zeilen befassen sich mit Teil 2. Hilft das?
Justin Edwards
0

Wie hier schon mehrfach erwähnt

-webkit-appearance:none;

Entfernt auch die Pfeile, was in den meisten Fällen nicht gewünscht ist.

Eine einfache Problemumgehung, die ich gefunden habe, besteht darin, einfach select2 anstelle von select zu verwenden. Sie können ein select2-Element auch neu formatieren, und vor allem sieht select2 unter Windows, Android, iOS und Mac gleich aus.

CharlesT
quelle
-8

Wenn Sie das User Agent StyleSheet von Chome überprüfen, finden Sie dies

outline: -webkit-focus-ring-color auto 5px;

Kurz gesagt, seine Gliederungseigenschaft - machen Sie es zu keiner

das sollte das Leuchten entfernen

Surajnaikin
quelle
8
Er fragt nicht nach dem Umriss, sondern nach dem glänzenden Hintergrund.
Apollo