Skip to navigation

malevolent design weblog

This blog is now defunct, but you can find more stuff over at my personal site

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.


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.