在文本框后显示图像？

Question

我需要在大约6个文本框旁边显示一个图像...我不想使用div标签，因为它们在IE / firefox等中的位置会有所不同。是否有一种简单的方法在文本框旁边显示小图像？ 例如在CSS中使用：after？

干杯

Answer 1

使用jQuery很容易

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

这是HTML：

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

UPDATE

如果您想显示/隐藏验证标记，也许可以在文本框旁边的HTML中声明它们，如下所示

<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" />

并使用以下jQuery代码显示或隐藏它们：

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

jQuery选择器#textbox1+img意思是“元素ID为textbox1的元素后的图像”

Answer 2

样式：

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*/
}

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 3

您在每个浏览器中div位置的不同是什么意思？ 如果您指的是填充等，则可以尝试使用reset样式表 。

Answer 4

为什么不将其放置在td中？（我想这是最简单的）

例如

<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>

如果需要（如果要求如此），请在运行时创建它。