CSS: How to add icon/image after input element

Question

I'm creating an HTML form and want it to display icons after the input fields whenever the data inside them has changed, and I'm struggling to find the right way to do this through CSS. I currently have the following class:

.ChangedInput
{
    border: 2px solid green;
}

.ChangedInput:after
{
    content:url('/Images/icons/table_edit.png');
}

And this is my input element:

<input type="text" name="DetailedDescription" size="160" class="ChangedInput" />

The green line is correctly applied as border, but I would expect teh table_edit.png icon to appear after the input element, alas it is not...

Here's a JSFiddle showing what I'm trying to accomplish: http://jsfiddle.net/8Hh8L/

EDIT: I should have stated that I want to apply this icon to a set of existing forms, and it would be a pain to go through all of them and change the input elements. So I'm looking for a solution which allows me to apply this to an existing input element. Using Javascript/Jquery if need be...

Why not just use an `img` element? http://jsfiddle.net/69apr/ — Dryden Long, Apr 10 '14 at 15:49
possible duplicate of [Can I use the :after pseudo-element on an input field?](http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field) — TylerH, Jan 28 '15 at 15:28

score 24 · Accepted Answer · answered Apr 10 '14 at 15:49

24

Fiddle

input can't have ::before or ::after elements. Try wrapping a <span> around the input and do the span:after

Or just use an img element after, as this will work too.

answered Apr 10 '14 at 15:49

Albzi

15,431
6
46
63

Sorry not what I'm looking see my latest edit, thanks however now at least know it's not supported on the input element itself – Alex Apr 10 '14 at 16:45
I ended up wrapping the the input in a as you suggested, I was able to implement this quite simple using a couple of jQuery lines on my existing code. Now I'm only struggling to get the with the border NOT to overlap my inputelement, see this: http://jsfiddle.net/8Hh8L/3/ – Alex Apr 17 '14 at 14:50
1

Try this: http://jsfiddle.net/8Hh8L/4/ or this http://jsfiddle.net/8Hh8L/5/ @Alex – Albzi Apr 17 '14 at 14:54

score 2 · Answer 2 · answered Apr 10 '14 at 15:58

Wrap a fieldset over span + input. Something like this.

<fieldset>
  <input type="text" name="table-edit" placeholder="You Text Here..." />
  <span class="icon-table-edit"></span>
</fieldset>

and then the CSS...

fieldset { position: relative; }
input { border: 2px solid green; }
span.icon-table-edit { position: absolute; right: 0; top: 0; background: url("your-image-path.jpg") no-repeat; }

...apply some width and height to the span, and adjust the top if necessary. Hope this help...

Sorry not what I'm looking see my latest edit, thanks however now at least know it's not supported on the input element itself — Alex, Apr 10 '14 at 16:45

score 2 · Answer 3 · answered Nov 13 '19 at 10:24

2

This worked in may case

  input {
    background: white url(./calendar.svg) right no-repeat; /*Your Image Link*/
    padding-right: 17px;
   }

answered Nov 13 '19 at 10:24

Salil Sharma

514
1
5
14

CSS: How to add icon/image after input element

3 Answers3