DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die `appearance`-Eigenschaft wird verwendet, um ein Element mit einer plattformspezifischen Formatierung anzuzeigen, die auf dem Design des Betriebssystems des Benutzers basiert.
.thing {
-webkit-appearance: value;
-moz-appearance: value;
appearance: value;
}Dies wird gerade aus dem Präfix entfernt, was großartig ist, da die Cross-Browser-Unterstützung hier sehr kompliziert ist.
Die `appearance`-Eigenschaft wird aus einem von zwei Gründen verwendet:
- Um einem Element, das standardmäßig keine plattformspezifische Formatierung hat, diese zuzuweisen.
- Um einem Element, das standardmäßig eine plattformspezifische Formatierung hat, diese zu entfernen.
Beispielsweise haben Eingaben mit `type=search` in WebKit-Browsern standardmäßig abgerundete Ecken und sind sehr strikt darin, was Sie über CSS ändern können. Wenn Sie diese Formatierung nicht wünschen, können Sie sie mit `appearance` mit einem Schlag entfernen.
input[type=search] {
-webkit-appearance: none;
}Oder Sie könnten eine Eingabe vom Typ `text` nehmen und sie einfach wie eine Such-Eingabe aussehen lassen.
input[type=text] {
-webkit-appearance: searchfield;
}WebKit-Werte
- checkbox
- radio
- push-button
- square-button
- button
- button-bevel
- listbox
- listitem
- menulist
- menulist-button
- menulist-text
- menulist-textfield
- scrollbarbutton-up
- scrollbarbutton-down
- scrollbarbutton-left
- scrollbarbutton-right
- scrollbartrack-horizontal
- scrollbartrack-vertical
- scrollbarthumb-horizontal
- scrollbarthumb-vertical
- scrollbargripper-horizontal
- scrollbargripper-vertical
- slider-horizontal
- slider-vertical
- sliderthumb-horizontal
- sliderthumb-vertical
- caret
- searchfield
- searchfield-decoration
- searchfield-results-decoration
- searchfield-results-button
- searchfield-cancel-button
- textfield
- textarea
Mozilla-Werte
- none
- button
- checkbox
- checkbox-container
- checkbox-small
- dialog
- listbox
- menuitem
- menulist
- menulist-button
- menulist-textfield
- menupopup
- progressbar
- radio
- radio-container
- radio-small
- resizer
- scrollbar
- scrollbarbutton-down
- scrollbarbutton-left
- scrollbarbutton-right
- scrollbarbutton-up
- scrollbartrack-horizontal
- scrollbartrack-vertical
- separator
- statusbar
- tab
- tab-left-edge Obsolete
- tabpanels
- textfield
- textfield-multiline
- toolbar
- toolbarbutton
- toolbox
- -moz-mac-unified-toolbar
- -moz-win-borderless-glass
- -moz-win-browsertabbar-toolbox
- -moz-win-communications-toolbox
- -moz-win-glass
- -moz-win-media-toolbox
- Tooltip
- treeheadercell
- treeheadersortarrow
- treeitem
- treetwisty
- treetwistyopen
- treeview
- window
Ressourcen
- Mozilla Docs for -moz-appearance
- Trent Walton on Webkit Appearance
- Shaun Inman on Disabling Inner Text Shadow of Text Inputs on iPad
- CSS3-Spezifikation
Browser-Unterstützung
Diese Browser-Supportdaten stammen von Caniuse, wo weitere Details zu finden sind. Eine Zahl gibt an, dass der Browser das Feature ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 83* | 80 | Nein | 83* | 15.4 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 15.4 |
Was ist der IE-Fallback dafür? Gibt es keinen? Ich versuche die Verwendung von jQuery für Select-Elemente zu vermeiden und stattdessen `appearance none` mit einem Hintergrundbild zu verwenden.
Sehr informativ.
Kann ich „appearence“ in IE9 ohne Plugin verwenden?
Die Firefox-Unterstützung für diese Eigenschaft ist fehlerhaft. `-moz-appearance: none` sollte den Dropdown-Pfeil eines Select-Elements entfernen, tut es aber nicht.
https://bugzilla.mozilla.org/show_bug.cgi?id=649849
Stimmen Sie für diesen Bug ab. Ich musste einen Hack verwenden, um dies zu umgehen. In welchem Jahr leben wir, 2012 oder 1992?
Sieht so aus, als wäre die `appearance`-Eigenschaft aus der Spezifikation entfernt worden1.
Es ist am besten, den Darm mindestens einmal am Tag zu entleeren. Auf diese Weise schleppen Sie kein überschüssiges Gewicht mit sich, was Ihnen ermöglicht, schneller vor Gefahren davon zu beschleunigen als eine Person, deren Darm nicht entleert wurde.
Sie sparen auch an der Tankstelle. Ihr Auto verbraucht weniger Kraftstoff, wenn es keinen Abfall beschleunigen muss.
Ich hätte gerne ein Update darüber, was als Fallback verwendet werden soll.
Im Moment denke ich, dass ich, da ich ein eigenes System entwickle und es auch KEINE IE-Unterstützung gibt, entweder dies in Divs mache und komplett gegen die Funktionsweise dieses Formularabfrage-Systems verstoße oder ein Swap-Out-Skript erstellen muss, das die Eingabefelder in IE durch Divs ersetzt.
Ich hasse IE, es ist mir unverständlich, warum jemand bei ihnen bleiben sollte, wenn sie eine so grundlegende mangelnde Unterstützung auf allen Ebenen haben.
Außer, dass Sie mit IE10+ Dropdown-Menüs gestalten können, während Firefox nicht geht. Firefox ist das neue IE.
Ich würde IE-Benutzer einfach auf die Chrome-/Safari-Downloadseite umleiten.
Hallo, Kumpel! Ich habe gerade herausgefunden, **wie man den Select-Pfeil aus Firefox entfernt**. Der Trick besteht darin, eine Mischung aus `-prefix-appearance`, `text-indent` und `text-overflow` zu verwenden.
Live-Beispiel: http://jsfiddle.net/4WVZW/
Danke!
Vielen Dank! Einfache Lösung und funktioniert einwandfrei!
Bei Selects verwende ich „-moz-appearance: window“.
Nur zur Information, dass es für Firefox 29+ nicht funktioniert.
Übrigens habe ich gerade einen Gist erstellt, der die Details erklärt (und Verbesserungen an der Lösung verfolgt): https://gist.github.com/joaocunha/6273016
@ChrisCoyier Sie sollten das unbedingt in den Beitrag aufnehmen, es ist Gold wert!
Es funktioniert nicht, hat jemand eine andere Lösung?
Ja, das funktioniert nicht.
Mit Firefox 34.0.5 öffnet sich das Beispiel in Codepen, der Pfeil ist immer noch da.
Da ich ein Hintergrundbild für verschiedene Pfeile verwendet habe, mache ich jetzt Folgendes, um Firefox gezielt anzusprechen (danke nathansmith)
https://gist.github.com/joaocunha/6273016/#comment-944635
um mein benutzerdefiniertes Hintergrundbild zu entfernen und nur den Standardpfeil zu belassen. Funktioniert & scheint nicht kaputt zu sein = kompatibel :)
Hallo, Grüße
Wie verstecke ich die appearance-Eigenschaft in Internet Explorer?
Können Sie mir helfen?
Danke.
Möglicherweise möchten Sie hier eine kleine Aktualisierung hinzufügen. Wie Lenny oben erwähnt hat, gibt es keine Spezifikation für `appearance`. Daher ist das Cross-Browser-Verhalten erratisch.
Laut MDN:
Dies hat dazu geführt, dass einige Entwicklungswerkzeuge wie autoprefixer die Unterstützung dafür eingestellt haben.
Es ist wirklich schade, dass diese Eigenschaft nicht weit verbreitet ist. Zumindest der Wert `none` sollte gut unterstützt werden, und das wäre ungefähr die *einzige* Eigenschaft, die Entwickler interessiert.
Aber überraschenderweise leistet Mozilla selbst miserable Arbeit mit `none`, sodass es beispielsweise bei `select`-Elementen nicht funktioniert.
Ich denke, diese Eigenschaft sollte stark vereinfacht werden und nur Werte wie `none`, `auto` und vielleicht, aber nicht unbedingt, einen eingeschränkten Bereich von Elementen wie `input`, `radio`, `checkbox` und `select` zulassen. Alles andere sollte fallen gelassen werden.
Vielleicht würde das einige Anbieterdivergenzen lösen.
Es sollte erwähnt werden, dass `-webkit-appearance: none;` derzeit in iOS7 für iPhone 5S (kann nicht für andere Versionen / Geräte gesagt werden) die abgerundeten Ecken auf Submit-Buttons nicht entfernt und mit `border-radius: 0;` kombiniert werden muss.
Keine der bereitgestellten Lösungen funktioniert für mich. Hat jemand eine andere Idee, wie man den Select-Pfeil unter Firefox für Android ausblendet?
Auf iPad 3 mit iOS 8 in Safari funktioniert es nicht.
Hey Chris, ich wollte Ihnen nur mitteilen, dass Sie hier einen Link zu https://css-tricks.de/7261-webkit-html5-search-inputs/ haben, wo Sie über Safari-Suchfelder sprechen, der eine 404 ist. Fühlen Sie sich frei, diesen Kommentar zu löschen, ich dachte nur, es wäre der einfachste Weg, Ihnen das mitzuteilen.
Joao Cunhas Link war großartig, er hat auch eine Lösung für Internet Explorer hinzugefügt. Die aktuellste Antwort
select {
-webkit-appearance: none;
-moz-appearance: none;
}
select::-ms-expand {
display: none;
}
Fantastisch! Das war das fehlende Puzzleteil für mich!
Funktioniert gut. Danke!
Großartig, vielen Dank!!!
Es funktioniert für mich ^^. Vielen Dank :D
Was sind die Gedanken der Leute dazu?
Andererseits freut es mich sehr, dass CSS Tricks immer häufiger als Top-Ergebnis bei Google/DuckDuckGo erscheint.
Ich bin auf diese Seite gestoßen, als ich nach ‚appearance none‘ gesucht habe.
FTW
Die Standard `appearance` wird in IE Edge (v12+) unterstützt.
Bitte aktualisieren Sie die Liste. Es gibt keine Referenz zu
-moz-appearance: checkbox-small;-moz-appearance: dialog;-moz-appearance: radio-small;-moz-appearance: scrollbar;-moz-appearance: tab-left-edge Obsolete;-moz-appearance: window;Und es fehlen noch viele Eigenschaften. Zu viele, um sie hier aufzulisten. Siehe die offiziellen MDN-Dokumente.
Opera unterstützt es jetzt. https://caniuse.com/#feat=css-appearance
Weiß jemand, wie man den kleinen Kreuz-Button in der Suchleiste entfernt? Er scheint von Chrome generiert zu werden.
Chrome 86.0.4240.111
macOS 10.14