CSS Appearance – Standard-Styling von Formularelementen überschreiben

Formularelemente – z.B. ein Submit-Button (input type="submit") – lassen sich manchmal mit CSS nicht ansprechen und folglich auch nicht gestalten. Sichtbar ist das Problem häufig erst beim Test auf Smartphones, da hier die mobilen Betriebssysteme das Standard-Styling anpassen. Solltet ihr euch mit diesem Problem einmal konfrontiert sehen, hilft es mit CSS Appearance die Standard-Stile zu deaktivieren.

Formularelemente (Button, Input) auf dem iPhone, iPad (iOS) stylen

Bleiben wir beim Beispiel mit dem Submit-Button. Mit dem CSS-Befehl appearance legt ihr fest, welches Aussehen der Browser auf das Formularelement anwenden soll. Damit eure eigenen Stile greifen, müsst ihr das Browser-Styling deaktivieren. Ergänzt den Selektor für den Submit-Button (z. B. input [type=submit] { … } ) um folgende Zeile:

appearance: none;

Anschließend sollten alle anderen CSS-Eigenschaften wie gewünscht dargestellt werden.

Submit-Button auf dem iPad, vor und nach der Anpassung
Submit-Button auf dem iPad, vor und nach der Anpassung

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-appearance feature across the major browsers from caniuse.com

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 6 Kommentare

  1. Jürgen Jester
    schrieb am 18.01.2018 um 09:52 Uhr:

    Hallo Jonas,
    vielen lieben Dank für diesen Hinweis. Ich war kurz davor das Thema als nicht lösbar zu „beerdigen“. Kennt hier noch jemand einen _aktuellen_ iPhone Simulator im Web, das wäre gerade wirklich hilfreich, da in Chrome die Buttons so nicht abgebildet wirden und ich mir immer ein iPhone bei meiner Frau ‚leihen‘ muss :)
    Danke und liebe Grüße,
    Jürgen

    Antworten
    • Jonas Hellwig
      schrieb am 18.01.2018 um 10:42 Uhr:

      Hallo Jürgen, wenn du einen Mac nutzt kannst du XCode von Apple installieren. Dort gibt es einen Simulator der alles genau so zeigt wie das iPhone bzw. iPad etc.

      Antworten
      • Jürgen Jester
        schrieb am 18.01.2018 um 12:56 Uhr:

        Hallo Jonas, das ist ja aber leider genau das Problem … ich nutze Windows :( daher war ich schon bei diesen vielen Onlinetestern ala „mobiletest.me“ usw. aber keiner rendert die Vorschau sauber mit den Buttons, das ist wirklich eine Lücke, die kein Anbieter schließt.
        Viele Grüße,
        Jürgen

  2. hans
    schrieb am 28.08.2013 um 09:49 Uhr:

    einfach ein bisschen abwarten, unter iOS7 sehen die submit buttons gut aus ;) . das ist aber auch ein gutes beispiel dafür wie behämmert OSX teilweise aussieht mit den übertriebenen schlagschatten, den glossy effekten und den runden ecken allerorten. iOS7 sieht dagegen wieder ziemlich gut aus …

    Antworten
  3. Woy
    schrieb am 26.08.2013 um 11:44 Uhr:

    Moin Meister,

    kannst du mir für Windoof einen guten Simulator Empfehlen, der vielleicht auch etwas „nativ“ arbeitet, oder bin ich gezwungen Xcode zu benutzen?

    Antworten
    • Jonas Hellwig
      schrieb am 26.08.2013 um 12:36 Uhr:

      Wirklich gut gefallen mir diese Simulatoren eigtl. alle nicht. Ich finde die Opera Emulatoren (http://best-web-design-tools.com/?s=rwd+simulator) noch am besten, aber sie simulieren halt nur den Opera-Browser. X-Code ist da wahrscheinlich die beste Lösung, abgesehen vom echten Endgerät.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →