Hallo Henry,
da scheint noch sehr wenig zu funktionieren. Oder wir verstehen es alle falsch. Das Ausprobierbeispiel, eingangs bei MDN, funktioniert bei mir ebenfalls nicht. Und die Spec scheint auch über die Jahre nicht sehr konsistent gewesen zu sein.
In der aktuellen Version der CSS Basic User Interface Module Level 4 Spec ist der Einfluss von appearance deutlich reduziert, im Vergleich zu Ansprüchen von früher, und einiges davon funktioniert schlicht nicht (Chrome 89, Firefox 86).
Unser Wiki-Autor scheint die Spec zu einem sehr mageren Zeitpunkt gelesen zu haben, denn das Selfwiki meint es gäbe nur "none" und "auto", was zur Zeit nicht stimmt. Ob es aber lohnt, das Wiki zu überarbeiten?
Am wichtigsten ist wohl appearance:none
, in dem Sinne, dass es dem Browser sagt, kein natives UI Element zu nehmen. Native Elemente verweigern ggf. CSS Stylings, bei appearance:none Elementen soll das nicht passieren. Bei mir sieht ein Button mit "none" im Firefox wie ein Pushbutton von 2000 aus, in Chrome macht es kaum einen Unterschied.
<a href="..." style="appeareance:button">...</a>
klappt bei mir nicht, weder pur noch mit -webkit- oder -moz- Präfixen. Laut Spec sollte es gehen, denn (1) appearance "applies to: all elements" und (2) ist <a> nicht auf der Ausschlussliste für appearance:button.
Die Spec schreibt ausdrücklich: „Note: Using button on a drop-down box select element works.“ - Nada. Does nothing for me.
Das oft als Beispiel angeführte appearance:textfield
, was bei input type="search" wirken soll, ist im Firefox ein Witz, weil search und text da eh gleich aussehen, und in Chrome/Opera wirkt es nicht. Der Unterschied zwischen search und text ist das X zum Löschen des Feldinhaltes, das eingeblendet wird. Geht bei mir mit appearance:textfield nicht weg
select style="appearance:none">
funktioniert, das scheint ein Weg zu sein, den Dropdown-Pfeil loszuwerden.
Rolf
sumpsi - posui - obstruxi