Trick # 236 | 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:
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.
Werbung
Werbung
