Set input-suffix for certain input fields with CSS

Question

I am working on an input form, with different input fields. They all get an attribute with their form.

Eg:

<input class="input-text" form="price">

or

<input class="input-text" form="percent">

I would like to add a suffix with the pseudo element ::after but cannot figure out how.

Ive already tried this CSS:

input[form="price"]::after{
    content: "&euro;";
}

and this:

input::after[form="price"]{
    content: "&euro;";
}

The problem seems to be with the ::after itself, but i cannot figure out what it is.

In addition to the answers given about generated content on input elements, there are a couple of other issues with your attempts 1) `content` being a CSS property does not understand HTML character entity references - you can either use the appropriate Unicode escape or the actual euro symbol 2) `::after` being a pseudo-element must be placed last in the selector. — BoltClock, May 23 '14 at 07:36

score 3 · Accepted Answer · edited May 23 '17 at 12:13

3

Pseudo classes like after and before cannot work on input elements. Why so? Because they work only on elements which can contain html markup. An input tag doesn't.

Robert Koritnik explained this quite good in this question.

There're other questions like that and like this:

edited May 23 '17 at 12:13

Community

1
1

answered May 23 '14 at 07:31

Kevin Cittadini

1,449
1
21
30

Madhurendra Sachan · Answer 2 · 2014-05-23T08:23:25.060

Clearly saying no you cannot do that in non container tags.

According to w3 standard :after or :before can be used in only container element. So you will have to use javascript.

See specification http://www.w3.org/TR/CSS2/generate.html#before-after-content

But there is an alternative you can use contenteditable property which makes div editable & then you can use after tag. But contenteditable is introduced in html5.

Here is a js fiddle http://jsfiddle.net/madterry/W4Y58/ . Down side is you cannot use this as form field & it is not widely supported.

score 0 · Answer 3 · answered May 23 '14 at 07:34

The problem is, that pseude elements are only supported on container elements, but not on allready replaced elements like images or input fields.

This is because they get rendered in the element itself, which is clearly impossible on input elements.

In the W3C specification it is even defined.

Set input-suffix for certain input fields with CSS

3 Answers3