CSS: Styling Input Fields

I’m working on a project where I’m using CSS to add a border radius and background image to an input field. Background images are supported by all browsers, but border radius is only supported by Firefox, Safari, and Google Chrome.

border-radius

To apply a border-radius to an input field:

input {
	-webkit-border-radius: 3px;
	-moz-broder-radius: 3px;
}

-webkit-border-radius is supported by Webkit-based browsers such as Safari and Google Chrome.

-moz-border-radius is supported by Mozilla (Gecko)-based browsers such as Firefox.

Although Internet Explorer does not yet support the border-radius CSS Attribute, I found a project on Google Code that enables a developer to add border-radius support for IE6-8:

ms-border-radius

Background Image Inside Input Text

The next CSS attribute that I needed for the project was to place the image of a magnifying glass inside the input field. I do this by using the background-image and background-position attributes.

input {
	width:200px;
	height: 25px;
        -webkit-border-radius: 3px;
	-moz-broder-radius: 3px;
        background-image: url(magnifying-glass.png);
        background-repeat: no-repeat;
        background-position: right;
}

I can alternatively use CSS Shorthand:

input {
	width:200px;
	height: 25px;
        -webkit-border-radius: 3px;
	-moz-broder-radius: 3px;
        background: url(magnifying-glass.png) no-repeat right;
}

Replace Input Field with Background Image

For different project, I wanted to replace the input field with a background image. I didn’t want to use a browser-based input field, so I designed one using Photoshop.

#searchCntnr input {
	display:block;
	border:0;
	float:left;
	background:url('images/search_input.png') no-repeat;
	font: 32px bold helvetica, arial, sans-serif;
	color:#333;
	width:660px; /*668 - padding-left*/
	height:44px; /*62 - padding-top*/
	padding-left:8px;
	padding-top:18px;
	padding-bottom:0;
}

The most important CSS attribute to note when replacing an input field with a background image is the border. If you do not set the border to 0, then the default input field border will appear around the background image.

I also added padding to the input field so that the input text would appear correctly within the background image, but doing so caused the background image to be pushed down and to the right. To fix this, I changed the width and height of the background image. The background image was originally:

#searchCntnr input {
	background:url('images/search_input.png') no-repeat;
	width:668px; 
	height:62px; 
}

But because I added 8px to the left padding and 18px to the top padding, I subtracted those values from the width and height of the background image, respectively:

#searchCntnr input {
	background:url('images/search_input.png') no-repeat;
	width:660px; 
	height:44px; 
	padding-left:8px;
	padding-top:18px;
}

Using CSS to add background images to input fields is fairly straightforward, but you will usually have to do a lot of playing in order to get it to appear the same in all browsers. Enjoy.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks