Css3 :After Pseudo Element with Input

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

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

Using :after pseudoelement with :required pseudoclass

Currently, the spec does not define behavior of pseudoelements with replaced elements, so this is not required to be consistent across browsers or even within browsers apparently.

The reason is that insertion using content makes a replaced element, and replaced replaced elements are not yet defined. From MDN, replaced elements are: external objects whose representation is independent of the CSS. Typical replaced elements are <img>, <object>, <video> or form elements like <textarea> and <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.

Until an indeterminate future draft, the best bet is either to use the *:required+:after selector with an empty span (or whatever) or use :required pseudoclass with something that can be used with a replaced element, like a background-image.

We can hope that the current behavior of -webkit- in replacing content:'' after type='date' points toward allowing pseudoelements on all elements. We'll see.

how can i select the sibling ::after pseudo element when input:focus

.form-input::after matches the pseudo-element that appears after the content of any .form-input element.

.form-input input:focus + ::after matches the pseudo-element that appears after the content of the next sibling of any focused input that is a descendant of .form-input.

Unless you have HTML like:

<div class="form-input">
    <input>
    <div class="form-input"></div>
</div>

… that isn't going to match anything.

You can't select the parent element's ::after based on the focus state of a child element. CSS doesn't have a parent selector.

You'd need to use JS for this.

Is it possible to set a CSS class' :after pseudo-element content property to the value of a text input on the same page

This is not possible without javascript.

But you can show an attribute:

<div data-text="Show this text"></div>

<style>
div:after { 
    content: attr(data-text);
}
</style>

CSS content generation before or after 'input' elements

With :before and :after you specify which content should be inserted before (or after) the content inside of that element. input elements have no content.

E.g. if you write <input type="text">Test</input> (which is wrong) the browser will correct this and put the text after the input element.

The only thing you could do is to wrap every input element in a span or div and apply the CSS on these.

See the examples in the specification:

For example, the following document fragment and style sheet:

<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content: 'Some'; }

...would render in exactly the same way as the following document fragment and style sheet:

<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

This is the same reason why it does not work for <br>, <img>, etc. (<textarea> seems to be special).

---

Related Topics