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

html css pseudo-element css-content
matra picture matra · Apr 6, 2010 · Viewed 513.2k times · Source

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

Robert Koritnik picture Robert Koritnik · Jan 11, 2011

:before and :after render inside a container

and <input> can not contain other elements.

Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered is within the container itself as a child element. input can not contain other elements hence they're not supported. A button on the other hand that's also a form element supports them, because it's a container of other sub-elements.

If you ask me, if some browser does display these two pseudo-elements on non-container elements, it's a bug and a non-standard conformance. Specification directly talks about element content...

W3C specification

If we carefully read the specification it actually says that they are inserted inside a containing element:

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

See? an element's document tree content

Related questions

CSS content property: is it possible to insert HTML instead of Text?

Just wondering if it's possible somehow to make the CSS content property insert html code instead string on :before or :after an element like: .header:before{ content: '<a href="#top">Back</a>'; } this would …

Read More
Input placeholder using CSS only

I know there are lot's of questions regarding this query here but none of them provide the solution for me. HTML <input id="tb1" type="text" class="note" /> <br> <p class="note1"> This is …

Read More
CSS data attribute new line character & pseudo-element content value

Is it possible to have a new line in a data attribute ? I am trying to do something like this: CSS: [data-foo]:after { content: attr(data-foo); background-color: black; } HTML <div data-foo="First line \a Second Line">foo</…

Read More