28 Feb 2005

Finishing Touches: Text Inputs

Most browsers allow some restyling of form elements, and as long as you don’t end up disguising their purpose it can help complete a design.

This site uses a soft shadow on text inputs; see the search at the bottom-right or the contact page. It just needs a suitable background image, class="text" on the input tags, and a bit of CSS, e.g.:

input.text, textarea
{
	background: #ffffff url("/_template/img/input.gif") top right;
	color: #000000;
	border: 1px solid;
	border-color: #888888 #888888 #aaaaaa #aaaaaa;
	padding: 3px 3px 4px 3px;
	font-size: 1em;
}
input.text:focus, textarea:focus
{
	border-color: #000000;
}

The second bit changes the border colour when the user has the cursor within the text input.