Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I use a :before or :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.

like image 707
matra Avatar asked Apr 06 '10 19:04

matra


People also ask

How do you use before and after pseudo elements?

CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.

What can you do with the before pseudo-element?

The ::before pseudo-element can be used to insert some content before the content of an element.

Can I have multiple before pseudo elements for the same element?

In CSS2. 1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)

What order must pseudo tags be listed in?

The recommended order is link,visited,focus,hover,active. The :link and :visited pseudo-classes should generally come first. Next should be :focus and :hover—they're specified now so that they override and apply to both visited and unvisited links.


2 Answers

: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. As I understand it this means within a container.

like image 90
Robert Koritnik Avatar answered Sep 30 '22 12:09

Robert Koritnik


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

like image 24
Alex Avatar answered Sep 30 '22 12:09

Alex