Image in input box

HTML & CSS
1

Hi
I want to know how to put images in an input box. I found a tutorial but the image used in it goes behind the text typed in the box. Here is the live demo:
http://www.xfunda.com/demo/demo1.htm
the site has used the image as a background. so it goes behind the text.
Can some one please me tell me how to make an input box with an image where the text does not go over the image? Using css of course.
Thanx

2

Hi,

You would just add some right padding to the input box to stop the text going over the image.
e.g.


input.inputname{padding-right:40px}

However most of the time the image in an input button is usually the submit button and therefore you would need to use an input type=image method usually something like this.

3

Thanx. Yes that was what i was looking for.
but your “enter text here…” does not hide when i click in the box. how d u hide that on a click?

4

if you want to clear the input value then you need to use javascript

http://www.plus2net.com/javascript_tutorial/text-onclick.php

vineet

5

Ic. that site is very helpful. its a good link. thanx for the help guys.