Live Demo

Question

我无法在使用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); */
}

Answer 1

::after伪元素将'element'放置在元素本身'之后'的内容（不在元素之后），input是一个void元素不能包含任何其他HTML。不幸的是，这不起作用。例如，请参阅：“CSS :after pseudo element on INPUT field。”

但是，使用jQuery，您可以使用以下内容添加新图像（不是背景图像或伪元素）（尽管未经测试）：

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

Simple demo

参考文献：

after()。

Answer 2

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

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

在<input />元素后添加CSS内容图像

2 个答案:

Live Demo

CSS：