Tired of those normal old text field boxes? Well, we are going to create our own custom text field. You can use it on a form or for your search field on your blog. We will start out by simply using CSS to customize the color of the text field's background and border. It's simple, but it can make a big difference and help your search field or form fit in with the design of your site.

Simple Text Field Styling with CSS

We will start with the HTML. Setup you basic shell for a HTML file and add the form and input tags in between the body tags.

<html>
<head>

<title>CSS Custom Text Field</title>

<link href="style.css" type="text/css" rel="stylesheet" />

</head>

<body>
<form>
<input type="text" name="field" class="textInput" />
</form>
</body>
</html>

Notice that in the input tag we are using a type of field - which creates a text field. The name can be whatever you would like. Then we add class="textInput". This connects us to the class .textInput in our CSS file. The name of the class can be whatever you want.

Now for the CSS.

/* CSS Document */
.textInput
{
border: 1px solid #ff0000;
background: #555555;
color: #ffffff;
font-size: 1.1em;
}

border - used to change the style of the border around the text field. Here I changed it to a red color. You can use border to change the thickness, border style (like dashed or dotted), and the color.

background - changes the background color of the text field (we will use an image later). The default background is white.

color - changes the color of the font. The default is black. I changed it to white.

font-size - changes the size of the font which will increase/decrease the size of the text field.

Obviously, you can use other properties to customize the text field. These are some of the more commonly used.

The HTML
The CSS

CSS with Image Text Field Customization

For even more customization you can add a background image behind the text field. We need to add a div and class around the input tag in the HTML.

<form>
<div class="fieldHolder">
<input type="text" name="field" class="textInput" />
</div>
</form>

This new class fieldHolder will hold the text field and the background image we want to use. We will also be changing up textInput.

.fieldHolder
{
	width: 182px;
	height: 27px;
	background: url(tfbg2.gif) no-repeat;
	float: left;
}

.textInput2
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	color: #000000;
	margin-top: 5px;
	margin-left: 5px;
}

First off, here is the image I am using - it needs to be saved to the same folder as you HTML and CSS file.
bg
(right-click save as/save image as)

Back to the CSS.
.fieldHolder
width - this is the width of the image we are using.
height - this is the height of the image we are using.
background - linking to the background image and no-repeat.
float - left, this is optional. It is needed if you want to line up forms side by side (if you do this you might need to add margin-right to space out the fields).

.textInput - styles for the text field
width - width of our text field.
height - height of our text field.
background - no background - we want to use the .fileHolder background.
border - no border.
color - color of our font/text.
margin-top - this is important and deals with getting the cursor to show up inside the 'text field' area in our background image. Because we just made an image we need to tell the cursor were to go. This could be different depending on the image you use.
margin-left - same as above - only position the cursor left or right.

The HTML
The CSS

The good thing about encasing the text field inside of fieldHolder is that you can adjust the position of the text field by changing the margins inside of fieldHolder and not have to worry about the cursor position. Once it is set within .textInput you shouldn't have to mess with it.

You can pretty much use whatever background image you can come up with. You will just have to adjust the margin-top and margin-left inside of the .textInput class to position the cursor correctly.

Popularity: 89% [?]

Related Post: