Image inside a textbox

[zeidhaddadin]

Hi all, I have seen something in facebook that I would like to do.They are putting an image inside a textbox (aligned to the left) .. Like this:http://zeidserver.brinkster.net/1.bmpCan anybody help me do this.Thanks very much,zeid

[sircharlo]

input type="text" style="background: url('magn.gif') no-repeat left"

[boen_robot]

From their CSS:

.inputsearch {  background: white url(/images/magglass.png) no-repeat 3px 4px;  padding-left: 17px; }

A background image and a padding to ensure the text doesn't go over it.

[zeidhaddadin]

Thanks very much guys!

[zeidhaddadin]

Guys I tired that but neither worked..I shows for example the "padding : 17px" but no image is shown..

[boen_robot]

Guys I tired that but neither worked..I shows for example the "padding : 17px" but no image is shown..

Is the path to the image correct? Remember you actually need to have an image at the specified location.Any link of the page, the CSS and the image you're using? I mean actual live links.

[zeidhaddadin]

This is my css file:http://zeidserver.brinkster.net/style1.cssand this is my imagehttp://zeidserver.brinkster.net/images/search.GIFalso using the style you gave me .. made the textbox look different.

[boen_robot]

This is my css file:http://zeidserver.brinkster.net/style1.cssand this is my imagehttp://zeidserver.brinkster.net/images/search.GIFalso using the style you gave me .. made the textbox look different.

Looks fine in all browsers I've tried, except Safari 3/Windows, but facebook's image didn't appeared either, so it's more of a Safari problem here.And I'm not suprised it looks different. The HTML specification specifies the appearance of form elements as implementation defined, so each browser is free to implement CSS on form elements as they wish.

[zeidhaddadin]

Thank you for checking .. I tried that on FireFox and it looks great but with IE I can't see the image .. also the texbox border is changed to be like a 3d or something, Now I changed it like this:background-image: url("images/search.GIF") no-repeat 3px 4px;padding-left: 17px;textbox looks normal (Flat) .. BUT now I can't see the image in IE nor FireFox

[boen_robot]

Thank you for checking .. I tried that on FireFox and it looks great but with IE I can't see the image .. also the texbox border is changed to be like a 3d or something, Now I changed it like this:background-image: url("images/search.GIF") no-repeat 3px 4px;padding-left: 17px;textbox looks normal (Flat) .. BUT now I can't see the image in IE nor FireFox

I don't see anything in your CSS to target the search field (the "#q" from your HTML). Try to add:

#q {  background: white url(/images/search.GIF) no-repeat 3px 4px;  padding-left: 17px; }

It should appear in IE7, Firefox 2 and Opera 9. I haven't tried IE6, but I don't think it has a problem with that.Oh, and, actually add an image on that location. There's a 404 page currently.