J. R. Boynton

Styling the input text field

Here are some examples of styling the simple text input field. Only recent browsers support this. IE 5+ on Windows, Mozilla 1+, Netscape 7+. IE 5+ on Macintosh OS X support some of these. To see them all, crank up Mozilla/Firefox.

I'm planning to write an article about these examples, but for now, here they are without explanations.

All the usual suspects apply

You can manipulate the border, the font, the padding, and the background -- just like you would set properties for any other HTML element.

To make the point, let's fake a field. (Don't do this at home!) When you just look at a field, what you usually see is just a box with some text in it. A lot of browsers display a text field just like this:

border-style: inset;
border-width: 2px;
font-size: 12px;
font-family: monospace;
width: 15em;
padding: 1px 0px 1px 0px;
background-color: white;

Got it? If this were a real field, you could change any of those default properties.

A "real" field for reference

Here's a field with no formatting:

Border-style: solid

border-style: solid;
border-width: 1px;
border-color: black;
font-family: helvetica, arial, sans serif;
padding-left: 0px;

Here's adding one more pixel of padding on the left:

padding-left: 1px;
border-style: solid;
border-color: black;
border-width: 1px;
font-family: helvetica, arial, sans serif;
padding-left: 1px;

Large

font-size: 48px;
width: 3em;

Monospace font for easier editing

font-family: monospace;

Background instead of border

border-style: none;
background-color: darkred;
color: white;
font-weight: bold;
padding-left: 2px;

Underline, rather than box

background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: darkred

White baseline in the background

font-family: courier new;
font-size: 15px;
background: url(./media/underline.png) transparent bottom repeat-x;
border-style: none

Image widget

color: white;
height: 23px;
width: 150px;
padding: 3px 5px 3px 5px;
border-style: none;
background-image: url(./media/textfieldwidget.png);
font-family: courier new;
font-size: 14px

Highlighting an error with a fake bottom border

border-style: none;
padding-bottom: 4px;
background: url(./media/textfielderror.png) transparent bottom repeat-x;

Indicating focus

input

background-color: lightyellow;
border-style: solid;
border-color: lightyellow;
border: 0px 4px 0px 4px;
padding: 1px 6px 1px 6px;

:focus

border-style: solid;
border-color: black;