Input Field Drop Shadow

Amazing how I still receive many e-mails regarding those drop shadows in the input and textarea elements in web forms. This is very simple, so let’s explain it. All you need is background image of the drop shadow and a few CSS lines. Let’s begin with:

input, textarea {
    background: url(drop_shadow_image.gif) no-repeat 0 0;
}

You might want to add class name for type="text" fields, so they are differentiated from checkboxes, radios or submit buttons (they are all input elements):

<input type="text" class="input_text" id="..." name="..." />

and change CSS:

.input_text, textarea {
    background: url(drop_shadow_image.gif) no-repeat 0 0;
}

IE/Win has a problem with proper positioning of a background image in textarea element when you scroll inside it or maybe all others miss-behave. Anyway, we add:

.input_text, textarea {
    background: url(drop_shadow_image.gif) no-repeat 0 0;
}
/* not for IE/Mac \*/
* html textarea {
    background-attachment: fixed;
}
/**/

Wanted more? Nope, that’s all… : )