Jump to content

Image inside a textbox


zeidhaddadin
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...