在< input>之后添加CSS内容图片元件 [英] Add CSS content image after <input> element

问题描述

我无法访问在使用JQuery进行表单验证的输入元素后面添加图像。如果我手动在元素上添加类...也不能工作。

I cannot reach to add an image after an input element for form validation with JQuery. Doesn't work also if I add the class manually on the element...

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

推荐答案

$ c> :: after 伪元素将元素放置在元素本身的内容之后（不在元素之后）， input 是一个void元素，不能包含任何其他HTML。这不能工作，不幸的是。请参见，例如： CSS：在INPUT字段上的伪元素后面 。

The ::after pseudo-element places the 'element' within the element itself 'after' its contents (not after the element), an input is a void element that cannot contain any other HTML. This cannot work, unfortunately. See, for example: "CSS :after pseudo element on INPUT field."

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

With jQuery, however, you could add a new image (not a background-image, or pseudo-element) using the following (though untested):

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

简单演示。

参考文献：

• < a href =http://api.jquery.com/after/ =nofollow> after（） 。

这篇关于在&lt; input&gt;之后添加CSS内容图片元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！