loginForm – a picture is worth a thousand words
Warum steht das Icon immer nur neben der Überschrift oder neben dem Formularfeld? Einfach mal den Schritt wagen und das Bildchen als Hintergrund direkt in das Formularfeld setzen! Das wirkt doch gleich ganz anders, oder?
Live-Example
Please note: Safari does not support background images in form fields.
StyleSheet
input {
width: 300px; border: 1px solid #bbb;
margin: 0; padding: 2px; padding-left: 24px;
}
label { display: block; margin: 6px 0 0 0; }
label a { color: #666; }
input.fUser { background: url(user.png) no-repeat 3px 2px; }
input.fPass { background: url(key.png) no-repeat 3px 2px; }
input:focus { background-color: #ffc; border-color: #777; }