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 :-)