【问题标题】：Add CSS content image after <input> element [duplicate]在 <input> 元素后添加 CSS 内容图像 [重复]
【发布时间】：2014-01-20 13:38:28
【问题描述】：

我无法在输入元素之后添加图像以使用 JQuery 进行表单验证。如果我在元素上手动添加类也不起作用...

HTML：

<script type="text/javascript">
      $(document).ready(function(){
          $('#last_name').addClass('cross');
      });
</script>

<label for="last_name">*Last Name:</label>
<input type="text" id="last_name" value="<?=$last_name?>" />

CSS：

.cross:after {
    content:url(/ico/cross.png);
    /* Tried also with:
      content:url('/ico/cross.png');
    AND
      content: '';
      background:url(/ico/no_check.png); */
}

【问题讨论】：

::after 伪元素将“元素”置于元素本身“在”其内容之后（而不是在元素之后），input 是一个空不能包含任何其他 HTML 的元素。不幸的是，这行不通。参见，例如：“CSS :after 输入字段上的伪元素](stackoverflow.com/questions/2587669/…)。”
谢谢，我可以用 jQuery .after 来实现吗？是否可以在 .after() 中添加图像？

标签： html css forms class input

【解决方案1】：

我认为使用这条路线你会做得更好：

Live Demo

CSS：

label[for='last_name'] {
  content: url(https://www.google.com/images/srpr/logo11w.png);
  width: 32px;
  height: 32px;
}

为了以书面形式区分，请使用placeholder：

<label for="last_name"></label>
<input name="last_name" placeholder="Last Name" />

【讨论】：

【解决方案2】：

::after 伪元素将“元素”在元素本身“在”其内容之后（而不是在元素之后），input 是一个 void 元素，不能包含任何其他 HTML。不幸的是，这行不通。参见，例如：“CSS :after pseudo element on INPUT field。”

然而，使用 jQuery，您可以使用以下（虽然未经测试）添加一个新图像（不是背景图像或伪元素）：

$('.cross').after('<img src="ico/cross.png" />');

Simple demo.

参考资料：

after().

【讨论】：

我的想法，看评论！谢谢