A little CSS background trick

Text input with background image

We're now going to see how you can create an input box like the one you see below:

All we need in order to create an input box like this is an image of a magnifying glass and some CSS code.

This input box is simply created by adding a background image to the the input tag and a left padding so that the text doesn't overlap the background image.

This is an example of the CSS:


Now, we simply assign our input tag to the CSS class "searchBox":

<input type="text" name="search" class="searchBox">

LudoJS framework
Go to cbolson.com

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2021 dhtmlgoodies.com