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.

Mon 28th Feb 2005, 7:45pm GMT

Filed under: Client-side Coding, Hints and Tips, Web

Comments

Nice, while I get the focus-thingy to work, the background part doesn't seem to work :(

— raZmus, 16th Mar, 5:46pm

Check the path to the background image that you've put in (to replace the "/_template..." bit), chances are it's not quite right so the image isn't displayed.

— Matt Round, 16th Mar, 10:11pm

Comments are now closed for this entry.

Matt Round’s company blog, covering web development, media, technology and pretty much anything else.

Web Sites: Good-looking, effective, accessible sites.
Multimedia: Logos, Flash games, animation and illustration.
Advice: Help with strategy, planning and getting noticed.