Lesefortschritt:

Formularfelder bei Bearbeitung highlighten

3. Mai 2023 | CSS-Stylesheet, WordPress

Dieser Beitrag beinhaltet 1496 Wörter. – Geschätzte Lesezeit: ca. 8 Minuten.

Formulare sind beliebt im Internet. Kaum eine Website, die ohne Formulare auskommt. Sie können den Usern bei der Orientierung aber zusätzlich helfen, wenn Sie ihnen zeigen, wo genau sie sich im Formular befinden. Das geht ganz einfach mit ein wenig CSS.

So wie nebenan schaut ein Formular auf der Website von Dr. Code aus. Geben Sie etwas ins Formular ein – da verändert sich optisch nix.

 

Das ist schon ganz OK – jedoch können Sie mit wenig Code festlegen, dass Felder, welche gerade bearbeitet werden, anders ausschauen als die unbearbeiteten. Den folgenden Code kopieren Sie hierfür in das CSS-Stylesheet Ihrer Website – unter Design/Customizer/Zusätzliches CSS:

12 + 12 =

input:focus, textarea:focus {
  border: 2px solid #59B14B !important;
  background-color: pink !important;
}

Die Farben und Rahmenbreiten (auf Zeilen 2 und 3) können Sie natürlich passend zu Ihrem Webdesign verändern.

Das Formular nebenan sieht nun auf den ersten Blick aus wie das obige. Wenn Sie jedoch ein Feld auszufüllen beginnen, bemerken Sie sofort den Unterschied.

8 + 10 =

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This