Can I use a :before or :after pseudo-element on an input field?

Question

I am trying to use the: after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK.

<style type="text/css">

.mystyle:after {content:url(smiley.gif);}

.mystyle {color:red;}

</style>

This works (puts the smiley after "buu!" and before "some more")

<span class="mystyle">buuu!</span>a some more

This does not work - it only colors someValue in red, but there is no smiley.

<input class="mystyle" type="text" value="someValue">

What am I doing wrong? should I use another pseudo-selector?

Note: I cannot add a span around my input, because it is being generated by a third-party control.

Answer 1

In Internet Explorer 7 and lower version, the pseudo-elements like :after and :before are not supported on any elements. It's also not meant to be used on replaced elements such as form elements (inputs) and image elements. In other words, you can say that it's impossible to use in pure CSS.

But, if you are using jquery you can use the below code:

$(".mystyle").after("add your smiley here");

For more information, you can refer to API docs on .after. To add your content with javascript. This will work across all the browsers.