Using :before in input field [duplicate]

Question

I want to add some content before the first input field in the following markup using the :before. The reason of using :before is that the markup cannot be changed.

I'm trying this, but does not work:

HTML:

<p class="submit"> <input id="submit" type="submit" value="Post" name="submit"> <input id="" type="hidden" value="" name=""> </p>

CSS:

.submit input:before{ content:"Test "; }

This would work, but I want to place the content inside .submit:

.submit:before{ content:"Test "; }

Demo: http://jsfiddle.net/gb2wY/

:before is supposed to be rendered as a new first child element for the element it is applied to – but input field can not have child elements. — C3roe
– C3roe, Commented Oct 14, 2013 at 9:55
Cleanest thing to do is to use a label as a wrapper: jsfiddle.net/gb2wY/2 — Dr.Flink
– Dr.Flink, Commented Oct 14, 2013 at 10:02

Val · Accepted Answer · 2018-08-09 14:40:56Z

7

I don't think you can do this as input has no content to put the pseudo-element before.

You could use the button element instead.

edited Aug 9, 2018 at 14:40

Val

17.6k24 gold badges99 silver badges148 bronze badges

answered Oct 14, 2013 at 9:56

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

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

1 Comment

Nathan Hornby Over a year ago

Except for the dateinput field, apparently (at least in Chrome). I've just run into this issue, where the date field will accept pseudo elements, but a number field won't.

Collectives™ on Stack Overflow

Using :before in input field [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related