show image after textbox?

Question

Hi, I need to show an image next to about 6 textboxes...I dont want to use div tags as these vary in position with IE/firefox etc. Is there a simple way to display a small image next to a textbox? such as using :after in css?

Cheers

Answer 1

With jQuery is easy

$(".textbox").after('<img src="validation-mark.jpg" />');

Here the HTML:

<input type="text" class="textbox"></input>

UPDATE

If you want to show/hide the validation marks, maybe you can have them all declared in the HTML next to you text boxes like this

<input type="text" id="textbox1"></input><img src="validation-mark.jpg" />
<input type="text" id="textbox2"></input><img src="validation-mark.jpg" />
<input type="text" id="textbox3"></input><img src="validation-mark.jpg" />

And show them or hide them with this jQuery code:

$("#textbox1+img").hide();
$("#textbox1+img").show();

The jQuery selector #textbox1+img means "the image after the element with ID: textbox1"

Answer 2

What do you mean by div's vary in position on each browser? If you're referring to padding and the like, you can try using a reset stylesheet.

Answer 3

The style:

label.tbimg {
    display: inline-block;
    background-image: url(http://sstatic.net/so/img/vote-accepted-on.png); center right no-repeat;
    padding-right: 30px;   /*icon width*/
}
label.noimg {
    display: inline-block;
    padding-right: 30px;   /*icon width*/
}

The HTML:

<label class="tbimg"><input type="text" class="textbox"></input></label>
<label class="noimg"><input type="text" class="textbox"></input></label>
<label class="tbimg"><input type="text" class="textbox"></input></label>
<label class="tbimg"><input type="text" class="textbox"></input></label>
<label class="noimg"><input type="text" class="textbox"></input></label>
<label class="tbimg"><input type="text" class="textbox"></input></label>

Answer 4

Why not placing it inside a td?(I guess this is the simplest)

e.g.

<table>
<tr>
<td><INPUT TYPE="TEXT" id="t1"></td>
<td><INPUT TYPE="TEXT" id="t2"></td>
<td><INPUT TYPE="TEXT" id="t3"></td>
<td><INPUT TYPE="TEXT" id="t4"></td>
<td><INPUT TYPE="TEXT" id="t5"></td>
<td><INPUT TYPE="TEXT" id="t6"></td>
<td><img src="myimg.jpg" /></td>
</tr>
</table>

If needed (if the requirement is like that), create that at runtime.