CSS :after pseudo element on INPUT field

Question

Hi,

I am trying to use :after CSS pseudo element on INPUT field, but it does not work. If I use it with SPAN, it works OK.

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

This works (puts the smily after "buu!" and berfore "some more")

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

This does not work - it only color 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 can not add SPAN sround my INPUT; because it is being generated by a third party control.

Matraj

Answer 1

:after and :before are not supported in internet explorer 7 and under 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 it's impossible with pure CSS.

However if using jquery you can use

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

API docs on .after

To append your content with javascript. This will work across all browsers.