1

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/

user2738640
  • 1,207
  • 8
  • 23
  • 34
  • 2
    `: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. – CBroe Oct 14 '13 at 09:55
  • http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field – Danield Oct 14 '13 at 09:59
  • Cleanest thing to do is to use a label as a wrapper: http://jsfiddle.net/gb2wY/2/ – Dr.Flink Oct 14 '13 at 10:02
  • You can do it using jquery .before http://jsbin.com/iVefeso/1 – Vikas Ghodke Oct 14 '13 at 10:31
  • @CBroe Except for when they can http://oi65.tinypic.com/r253wp.jpg – Nathan Hornby Mar 02 '17 at 11:08
  • @NathanHornby: Some browser have chosen to implement it for such elements as well, yes. But that must not necessarily mean it will work everywhere. – CBroe Mar 02 '17 at 11:48
  • @CBroe Definitely, I think some consistency is required there - seems pretty arbitrary. But importantly "…input field can not have child elements" is a false statement; as sometimes they can. – Nathan Hornby Mar 02 '17 at 12:12
  • @NathanHornby: Well in HTML they can not have child elements. And if you combine that with what the CSS spec (2.1) says about pseudo elements, _“The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element”_ you have the argument for why one should not rely on that working properly in all browsers. – CBroe Mar 02 '17 at 12:19
  • @CBroe This is clearly a semantics disagreement - ultimately some self-closing elements can contain pseudo elements, even thought the spec says they *shouldn't*. But, sometimes they definitely can. I just thought it was worth clarifying for future visitors. – Nathan Hornby Mar 02 '17 at 13:42

1 Answers1

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.

Val
  • 17,336
  • 23
  • 95
  • 144
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • 1
    Except for the `date`input 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. – Nathan Hornby Mar 02 '17 at 11:04