matra matra - 1 month ago 9
CSS Question

Can I use the :after pseudo-element on an input field?

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

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