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

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets 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

3 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 …

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.