Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas 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 (Autor)
      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 (Autor)
      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

Schreibe einen Kommentar zu Woy Antworten abbrechen

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 →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: