How to add a background image to an input field

I’ve been asked a few times by folks on ways to effectively add a background image to a search input field. This technique is used on the Apple website.

I always thought it was a cool ‘bells and whistles’ type feature and decided to try to implement this on some projects myself.

It’s fairly easy to implement. All you need is an icon image, some CSS and javascript. I’m using a magnifying glass image as it’s a perfect visual for search input fields.

CSS

There are only two styles to use. One sets the background image and padding for the image on the field before the user clicks in the field. The second style, which is applied to the input field itself, is called when the user’s cursor is focused on the field. (The blinking cursor when you click in the box.)
[css]
<style type="text/css">
.searchBox{background:url(‘/demos/images/icon_magglass.gif’) no-repeat;
padding-left:20px;
width: 200px
}
input {
width:220px
}
</style>
[/css]

As you can see there’s not much to it. The searchBox class is displaying the magnifying glass image at the far left of the field with a padding of 20px.

The input style is defined with no background image. This is the effect that removes the icon when the user clicks inside the field. We set the width 20px larger to avoid the field shrinking onblur. This is important. Without the extra width the field will shrink onblur and the effect will look less than professional.

HTML and Javascript

Now that we have the styles defined we can use a simple javascript call for onfocus and onblur. In a nutshell, onfocus is the functionality that happens when the user clicks on the field. The onblur call tells the browser what to do when the user’s cursor is not on the field.

[xhtml toolbar="true" light="true"]
Search: <input id="searchField" class="searchBox" name="q" size="24" onfocus=’javascript: document.getElementById("searchField").setAttribute("class", "");’ onblur=’javascript: document.getElementById("searchField").setAttribute("class", "searchBox");’ maxlength="256" value="" type="text" />
[/xhtml]

We’ll focus on the onfocus part first. Here we are accessing the DOM to reference the ID ‘searchField’ and set the class via the setAttribute call. Since we want the icon to disappear when the user focuses on the text field, we set the class to none. This applies the input style above.

The next item is onblur. We again access the field through the DOM reference of ID. But this time we add a class to the input field, in this case .searchBox. This adds the icon back into the field which results in a nice clean ‘bells and whistles’ effect.

The good thing about this technique is that is does not add much markup to your code and can still offer something to your end users. It’s nice to have eye candy on your pages but using them effectively where it doesn’t inhibit your users experience is the key.

[button type=tick color=whitesize=normal]Demo[/button]

Enjoy!

Related Posts

A CSS style guide for form fieldsets

11 Comments

  1. Dan

    04.20.2011

    Thats a nice bit of code will this work for other fields?
    Like any text input Box?

  2. admin

    04.21.2011

    The same is based on a text input. This technique can be used on other form fields but not sure how they would display.

  3. Sam

    04.28.2011

    if I’m adding a non-repeating background image to an input field, I tend to style a div surrounding a transparent input field with no border. Otherwise, text entries which are larger than the input field cause the background to “scroll” in IE7, and ends up ruining the look of your forms.

  4. admin

    04.28.2011

    Interesting. I just tested this in IE8 and although it didn’t ‘scroll’ the text did overlap onto the image when I added text past the viewable area. If you care to share your technique I’m more than happy to update the post and credit you.

  5. great reading, thank you for sharing this info. I have already used this on one job.

  6. Matt

    05.10.2011

    Pretty cool. I’ve been doing this for a while now. It’s amazing how the details like this can dramatically improve a website’s overall feel!
    Matt recently posted..Best Fiverr Gigs – My PicksMy Profile

  7. Luke

    07.27.2011

    I have used this on a couple of websites over the years, it’s a handy piece of code!

  8. Dave

    08.04.2011

    Awesome, it’s the extra little touches like this that make a website look great. Good tips.

  9. Harry

    09.19.2011

    I’m probably being stupid, but where is the bit where you tell the box which image to use as the background? I see the link to the magnifying glass image but how about the background fill (as in the Apple example where it is a dark grey which a shading effect?)
    Harry recently posted..Chelsea fan with the mouth of a SquidMy Profile

  10. admin

    10.04.2011

    @Harry This post is from a technique I used a few years back when CSS3 was still relatively unknown. There are two ways to accomplish this technique. You can use a linear gradient (if you’re talking about the text field) or use a box-shadow style for the outside of the field e.g. think ‘outer glow’. Try checking css3please.com. Real time editing on the page to see if that’s what you’re looking for.

  11. Earl Dickerson

    02.21.2012

    Is it possible to create text input upon a background image?
    Earl Dickerson recently posted..Why Project Management Is DifficultMy Profile

Leave a Reply






You must add your URL for KeywordLuv & CommentLuv to function.



CommentLuv badge

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.