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

submit-button-css-iphone-ipad

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.

Seminar: Responsive Web Design für Konzeptioner, Projektleiter und Designer

In diesem Seminar lernen Sie alle Aspekte von Responsive Design kennen, ohne dabei tiefer als notwendig in die technischen Details einzusteigen.

Berlin, 29. + 30. September 2016

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