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

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 伪元素将“元素”放置在元素本身的“之后”其内容(而不是在元素之后)，一个 输入 是一个 void 元素，不能包含任何其他 HTML。不幸的是，这是行不通的。例如，请参见:“CSS :after pseudo element on INPUT field 。”

但是，使用 jQuery，您可以使用以下内容(尽管未经测试)添加一个新图像(不是背景图像或伪元素):

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

Simple demo .

引用文献:

• after() .