TextField in image

[cdog5000]

OK, So i have this image (attached) how do i put a text field in the middle of it?

 

[attachment deleted by admin]

[noober]

Make the image appear as the background image in your text field.

Create the text field and give it a class name. Then in css, assign the given image as the background image. You might need a fix for IE6 though.

[nauir]

Here is the code you should use:

<script>
.class1{
background:url('INSERT URL HERE');
}
</script>
<input type=text class='class1'>TYPE HERE</input>

 

That will put the input in the bg. That is the only way to really do this. You can also do it with a table and center the input to have it centered inside the input.

 

Here is the table example:

<script>
.class1{
background:url('INSERT URL HERE');
}
</script>
<table width=200 height=200 border=0>
<tr><td  class='class1'>
<input type=text>TYPE HERE</input>
</td></tr>
</table>

 

I hope this helps!

[haku]

It's good that you helped the guy, thanks for contributing to the site. There were a few problems with your code though. This:

 

<script>
.class1{
background:url('INSERT URL HERE');
}
</script>

 

should be wrapped in style tags, like this:

 

<style type="text/css">
.class1{
background:url('INSERT URL HERE');
}
</style>

 

Script tags are for scripting languages. CSS is a markup language, which is why it's style tags.

 

Also, there is no need to use tables for this at all.

CSS:

#target
{
  background:url('INSERT URL HERE') no-repeat top left;
  height: __px; // enter the height of the image in pixels here
  width: __px; // enter the width of the image in pixels here
}

HTML:

<input type="text" id="target" />

 

You will also need some padding in order to get the text in the right spot. Here is the CSS you can start with - you will need to check it in various browsers, as I only checked it in FF. But it will work with the background image attached to the original post:

 

#target
{
  background:transparent url(searchbox.png) no-repeat scroll left top;
  font-size:20px;
  height:35px;
  padding-left:10px;
  padding-right:11px;
  padding-top:10px;
  width:128px;
}

[nauir]

haha whoops! I was doing Javascript all day! My bad.

[TheFilmGod]

I personally prefer to put all padding declaration into one statement:

 

padding-left:10px;
padding-right:11px;
padding-top:10px;

 

padding: 10px 11px 0 10px;