kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Submit-Button auf dem iPhone, iPad (iOS) stylen

Der Submit-Button (input type="submit") eines HTML-Formulars lässt sich manchmal auf dem iPhone oder iPad mit CSS nicht ansprechen und folglich auch nicht gestalten. Solltet ihr euch mit diesem Problem einmal konfrontiert sehen, probiert folgenden Webkit-spezifischen CSS-Befehl aus.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

CSS-Befehl für den Submit-Button

Ergänzt den Selektor für den Submit-Button (z. B. input [type=submit] { … } ) um folgende Zeile:


-webkit-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

Da der "Appearance"-Befehl für alle Webkit-Browser gilt, hilft er euch auch bei der Formular-Gestaltung in Chrome und Safari am Desktop-Computer.

Links

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

6 Kommentare

  1. Woy

    Verfasst am 26. August 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?

    • Jonas Hellwig

      Verfasst am 26. August 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.

  2. hans

    Verfasst am 28. August 2013 um 9: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 …

  3. Jürgen Jester

    Verfasst am 18. Januar 2018 um 9: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

    • Jonas Hellwig

      Verfasst am 18. Januar 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.

      • Jürgen Jester

        Verfasst am 18. Januar 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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.