fun with css part 2

Introduction

Have you ever considered a default <input /> field to be too boring? Why not enrich it with a background image? Nice idea for a login form or something similar. If you like the idea create the following .css style sheet.

.inputfieldsPassword {
    <FONT color=red>background</FONT>: <FONT color=blue>url('../pictures/password.png') no-repeat 0 1px;</FONT>
    <FONT color=red>background-color</FONT>: <FONT color=blue>white;</FONT>
    <FONT color=red>padding-left</FONT>: <FONT color=blue>17px;</FONT>
    <FONT color=red>font-size</FONT>: <FONT color=blue>8pt;</FONT>
    <FONT color=red>font-family</FONT>: <FONT color=blue>Verdana;</FONT>
    <FONT color=red>width</FONT>: <FONT color=blue>100%;</FONT>
    <FONT color=red>height</FONT>: <FONT color=blue>19px;</FONT>
    <FONT color=red>border</FONT>: <FONT color=blue>1px solid #7b9ebd;</FONT>
}

set the <input /> control's class property to the .css class created above

<input name="txtPasswort" type="password" id="txtPasswort" class="inputfieldsPassword" />

and again, enjoy :-)