CSS: Add Images To Form Fields The Right Way

Here is a tidy little CSS trick that you may have seen around the internet. It takes little effort, works in all browsers and can add real class to your forms on your website. This article assumes a little bit of working knowledge with CSS and HTML.

Lets begin with a screenshot of the final result.

This example could be used for a search field on a webpage. Firstly we need the HTML code for the form field:

<input type="text" name="textfield" id="textfield" class="search" />

Notice the part that I have coloured in red, this is the important part. This is the part of the code that will tell the browser which section of the cascading style sheet (CSS) to use to make style changes to this particular form field.

The second part is to prepare the background image that you want to use on your form field. In this case I have chosen a magnifying glass icon but you can use what ever you want, be creative! This is the image we will be using in the example.

The image is 34 by 34 pixels in size and has a bit of white space around the edges, this is important otherwise when you put it in your form field it can look squashed against the edges if you don’t leave white space in your image.

Next is the CSS code.

input.search {  
background:url(images/SearchIcon.jpg) left no-repeat;
padding: 4px 4px 4px 34px;  
border:1px solid;   
font: 100% 'trebuchet ms',helvetica,sans-serif;  

Let’s break down the code one line at a time.

Firstly the ‘input.search {‘ line simply references the input box named search, remember the red part of the HTML code above? This tells the browser to apply all of the options after the { to the ‘search’ form field.

background:url(images/SearchIcon.jpg) left no-repeat; this section of the CSS sets the background properties of the search box. ‘url(images/SearchIcon.jpg)’ is a reference to the image file and the directory in which it resides on the web server. The ‘left’ property simply aligns the image to the left side of the form field and ‘no-repeat’ stops the background images from being ’tiled’ multiple times inside the field. If you don’t know what I mean try removing the ‘no-repeat’ property and see what happens.

The padding property is tricky to explain but basically it leaves a set buffer zone around the inside of the form field. ‘padding: 4px 4px 4px 34px’ leaves 4 pixels of space between the top of the form field and the text space, 4 pixels on the right, 4 pixels on the bottom and 34 pixels on the left. The order of the numbers is always top, right, bottom, left. The reason we have 34 pixels on the left is because if we didn’t and someone tried to type something into the form field they would type over the top of the image, we set it to 34 pixels because we already know that the image is 34 pixels wide. You can experiment with these values and you will need to change them to suit your own images. The best way to learn how it works it to experiment! Change values. Set your padding values to 100px 43px 1px and 999px if you want to, see what happens.

‘color:#3D3D3D’ sets the colour of the text that you enter into the form field. #3D3D3D is the hex code for a darkish grey colour. There is a ton of hex codes and colours on this chart.

‘background-color:#FFFFFF;’ sets the background colour of the form field. #FFFFFF is the hex code for white.

‘border:1px solid #000000;’ sets a 1 pixel width black solid border around the outside of the form field. #000000 is the hex code for black.

‘font: 100% ‘trebuchet ms’, helvetica, sans-serif;’ sets the font size to take up 100% of the height of the form fireld and sets the fonts that should be used for the input text in the form field.

That is really all there is to it. This is a very basic example but you can use this method to come out with some fantastic results that will really set your website design off.

Happy CSS’ing!

One thought on “CSS: Add Images To Form Fields The Right Way”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.