Wiki: appearance

[Nico R.]

Hallo zusammen,

ich verzweifele gerade daran, einem select-Element in Safari mobile sein normales Erscheinungsbild (mit Pfeil) zurück zu geben. Bei der Recherche habe ich auch auf der entsprechenden Wiki-Seite von SELFHTML nachgelesen.

none (Standardwert), betriebssystemspezifisches Styling bleibt erhalten

Das Gegenteil ist doch der Fall, oder nicht?

Schöne Grüße

Nico

[Matthias Scharwies]

Servus!

Hallo zusammen,

ich verzweifele gerade daran, einem select-Element in Safari mobile sein normales Erscheinungsbild (mit Pfeil) zurück zu geben.

Das funktioniert leider nicht. Im Wiki-Artikel steht:

Diese klassischen select-Menüs haben mehrere Nachteile:

• Als Inhalt der options ist nur Text möglich – keine Bilder und keine Auszeichnungselemente
• Eine Gestaltung mit CSS ist nur begrenzt möglich. Sie übernehmen ihr Aussehen vom Betriebssystem des Nutzers. Auf mobilen Geräten werden sie sogar aus der Seite herausgelöst und in einem eigenen Popup dargestellt.

Aufgrund dieser Probleme wichen Entwickler oft auf die oben vorgestellten versteckten Radio-Buttons, auf Lösungen mit klickbaren span-Elementen, die oft nicht zugänglich waren, oder auf in jedem Framework anders realisierte proprietäre Menüs aus.

Bei der Recherche habe ich auch auf der entsprechenden Wiki-Seite von SELFHTML nachgelesen.

none (Standardwert), betriebssystemspezifisches Styling bleibt erhalten

Das Gegenteil ist doch der Fall, oder nicht?

Imho nicht - iOS erzeugt eben sein eigenes, dem Betriebssystem entsprechendes Select-Menü.

In diesem Artikel steht noch nichts zu …

select,
::picker(select) {
  appearance: base-select;
}

Das trage ich nach!

Herzliche Grüße
Matthias Scharwies

[Nico R.]

Hallo Matthias,

Imho nicht - iOS erzeugt eben sein eigenes, dem Betriebssystem entsprechendes Select-Menü.

Ja, genau. Indem ich appearance: none angebe, kann ich das aber (teilweise) verhindern und das Element selbst stylen.

Wenn ich einem select-Element z.B. einen padding-Wert zuweise, wird der im Safari nur dann angewendet, wenn appearance: none angegeben ist, darüber hinaus verschwindet dann auch der browsereigene Pfeil. Mit appearance: auto bekomme ich das Browser-Standard-Outfit zurück.

Deswegen stimmt meiner Meinung nach diese Aussage im Artikel nicht:

none (Standardwert), betriebssystemspezifisches Styling bleibt erhalten

Im Gegenteil müsste es doch heißen: "none: betriebssystemspezifisches Styling kann überschrieben werden." Und wenn ich das richtig sehe, scheint mir auto der Standardwert zu sein.

In diesem Artikel steht noch nichts zu …

select,
::picker(select) {
  appearance: base-select;
}

Das trage ich nach!

Das kennt der Firefox gar nicht 🤔

Schöne Grüße

Nico