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

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