Set input-suffix for certain input fields with CSS [duplicate]

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
– BoltClock, Commented May 23, 2014 at 7:36

Community · Accepted Answer · 2017-05-23 12:13:50Z

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, 2017 at 12:13

CommunityBot

11 silver badge

answered May 23, 2014 at 7:31

Kevin Cittadini

1,4791 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Madhurendra Sachan · Accepted Answer · 2014-05-23 08:23:25Z

1

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.

edited May 23, 2014 at 8:23

answered May 23, 2014 at 7:31

Madhurendra Sachan

7608 silver badges23 bronze badges

Comments

Friedrich · Accepted Answer · 2014-05-23 07:34:15Z

0

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.

answered May 23, 2014 at 7:34

Friedrich

2,3302 gold badges22 silver badges43 bronze badges

Collectives™ on Stack Overflow

Set input-suffix for certain input fields with CSS [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related