Using images for input fields in html.. Help!

ViciOuS · 08-27-2005

Recently and in the past I have seen people that use images for input fields. It especially works wonders with certian unique site themes and seems quite easy but i've ran into a dead end and I need some help.

I did a test with the src attribute in the input tag. The HTML is below, but it doesn't work correctly, anyone know why?

Code:

<HTML>
..etc..etc...

<Form>
	<input type="text" src="InputBox.gif" value="Test ME">
</Form>

GoldNetX · 08-28-2005

It is rather simple. Here is the method I use:

Code:

<div id="linkinput" style="background-image:url(images/images_09.png);">
<input type="text" style="background-color: transparent; border: solid 0px #FFF;" maxlength="100" name="site"/>
</div>

It will require a little tweaking to make sure the box is positioned right and the DIV is the correct size. But what this effectively does is it creates a div with your background image. This div then contains the form input box, but the input box is actually completely transparent, minus the text.

There may be a simpler way to do it, but this works for me.

You can see and example of it here: http://www.gusmayo.gwgaming.net/
I use it on my shoutbox inputs.

ViciOuS · 08-28-2005

Awesome. More help then I had expected

hmm, the image just repeats itself until the end of the screen, I added in css WxH attributes in the style attribute but still does it.

GoldNetX · 08-28-2005

Try adding this to the css style:

Code:

background-repeat: no-repeat;

So it would be like this:

Code:

<div id="linkinput" style="background-image:url(images/images_09.png); background-repeat: no-repeat; width:#px; height:#px">
<input type="text" style="background-color: transparent; border: solid 0px #FFF;" maxlength="100" name="site"/>
</div>

And also check that you have the dimensions on the css correctly defined.