Add CSS content image after <input> element [duplicate]

Question

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

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](stackoverflow.com/questions/2587669/…)." — David Thomas
– David Thomas, Commented Jan 3, 2014 at 0:08
Thank you, can I reach that with jQuery .after? Is it possible to add an image inside .after()? — Perocat
– Perocat, Commented Jan 3, 2014 at 0:11

Community · Accepted Answer · 2017-05-23 12:23:14Z

3

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

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" />');

Simple demo.

References:

after().

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Jan 3, 2014 at 0:12

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Perocat Over a year ago

What I thought, see comment! Thank you

Deryck · Accepted Answer · 2014-01-03 00:21:48Z

1

I think you would do better using this route:

Live Demo

CSS:

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

And to distinguish it in writing, use placeholder:

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

answered Jan 3, 2014 at 0:21

Deryck

7,6662 gold badges27 silver badges44 bronze badges

Collectives™ on Stack Overflow

Add CSS content image after <input> element [duplicate]

2 Answers 2

1 Comment

Live Demo

CSS:

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

CSS:

Comments

Linked

Related