Design für Button "Abbrechen und alle Angaben löschen"

Question

Wo ist das Design für den Button "Abbrechen und alle Angaben löschen" festgelegt? Auf mobilen Geräten wird dieser anders angezeigt (wesentlich rundere Ecken) als die Buttons "Weiter" und "Zurück"

Comments

Welches Layout verwenden Sie denn? In dem Standard-Layout "SoSci Survey '23" kann ich das beschriebene Problem nicht replizieren. Posten sie gerne auch einen Pretest-Link.

---

Tatsächlich verwenden wir "SoSci Survey '23". Unter Fragebogen-Layouts -> Hauptelemente -> Köpfe (z.B. Weiter-Knopf) lässt sich die Darstellung von Knöpfen anpassen. Die Änderung von Farben wird hier für den Weiter-Knopf und den Abbrechen-Knopf übernommen. Einstellungen zum padding werden für den Abbrechen-Knopf nicht übernommen. Das Problem tritt nur auf mobilen Geräten auf.

In der "HTML-Vorlage des Layouts" konnte ich nicht finden, an welcher Stelle die Buttons definiert werden. Gibt es irgendwo eine Ausnahme für mobile Geräte? Kann der Button im CSS für alle Geräte fest definiert werden?

---

Als Workaround hat es geholfen, unter Fragebogen-Layouts -> Hauptelemente -> Köpfe (z.B. Weiter-Knopf)  -webkit-appearance: none; -moz-appearance: none; appearance: none; zu ergänzen.
Warum das Phänomen nur bei %button.leave% auftrat ist mir noch unklar.

Answer 1

Danke für die Info, dass Sie das Problem für den Moment lösen konnten.

Die Weiter- und Zurück-Knöpfe werden durch ein <button>-Element im Fragebogen eingefügt. Die anderen Kontrollknöpfe werden als <input>-Elemente realisiert.

Ich gehe stark davon aus, dass das unterschiedliche Verhalten genau daher rührt. Offenbar passt der ein oder andere Mobil-Browser die <input>-Elemente standardmäßig stärker an and die <button>-Elemente.

Wir nehmen mal auf die SoSci-Wunschliste, das zu vereinheitlichen. Danke für den guten Hinweis!