show image after textbox?

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

Answers


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"


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>

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.


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.


Need Your Help

Testlink Test cases location with Wamp server

server wamp testlink

I had a problem with my WAMP server not being online so after some hours changing values on Httpd.conf i was finally able to make it go online after all, with all of it's services too. But when i t...

Error adding System.Data.Services.Client reference to windowsphone7.1 sdk

c# windows-phone-7 windows-phone-7.1

After asking my first question Windows Phone 7.1 app accessing Azure Storage directly, I download wp7facebookazure wp7.0 sample.