25

I'm trying to come up with some good default styling for <input>s in HTML5 and tried the following:

input::after         { display: inline; }
input:valid::after   { content: ' ✓ '; color: #ddf0dd; }
input:invalid::after { content: ' ✗ '; color: #f0dddd; }

Alas, the ::after content never shows up. It's not a problem with double- versus single colons for the pseudo-elements; I've tried both. It's also not a problem with having a pseudo-element and a pseudo-class; I've tried it without the :valid and :invalid. I get the same behavior in Chrome, Safari, and Firefox (Firefox doesn't have the :valid and :invalid pseudo-classes, but I tried it without those.)

The pseudo-elements work fine on <div>, <span>, <p>, and <q> elements -- some of which are block elements and some are inline.

So, my question is: why do browsers agree that <input>s don't have an ::after? I can't find anything in the spec that would indicate this.

1
  • 2
    For the record, double colons and single colons were intended to distinguish pseudo-elements and pseudo-classes, because people were munging both of them together into an umbrella term called "pseudo-selectors".
    – BoltClock
    Oct 4, 2012 at 14:01

3 Answers 3

31

As you can read here http://www.w3.org/TR/CSS21/generate.html, :after only works on elements that have a (document tree) content. <input> has no content, as well as <img> or <br>.

3
  • 1
    Sad truth you have there. :( Some pretty sweet things could be accomplished if the <img>, <input>, and some other elements were supported. Such as image tooltips with alt attribute, and such. Thanks nevertheless! Nov 3, 2011 at 17:58
  • @Web_Designer agreed, I just put something together with <input> and the after selector where it hides the input visibility but shows a star over the input with the :after selector
    – Josh Bedo
    Jun 13, 2014 at 14:38
  • This is actually not quite right. There is a specific category of elements including <img> and <input>, but also <select>...</select> that are immune to various subsets of CSS owing to the assumption by the W3C that these would specify OS-specific implementations. This is somewhat confusing because <input> controls now pretty much obey CSS entirely (but not pseudo elements) while the others don't.
    – podperson
    Dec 10, 2020 at 20:48
6

You can put a span before or after the element. E.g.:

<style>
  #firstName:invalid+span:before {
    content: "** Not OK **";
    color: red;
  }
  
  #firstName:valid+span:before {
    content: "** OK **";
    color: green;
  }
</style>

<input type="text" 
    name="firstName" 
    id="firstName" 
    placeholder="John" 
    required="required" 
    title="Please enter your first name (e.g. John )" 
/><span>&nbsp;</span>

5

Webkit lets you do ::after on input elements. If you want a way to make it work in Firefox you could try using ::after on the input's label rather than the input itself.

1
  • 2
    Not sure if this has reverted, but ::after on input elements does not appear to work in Chrome 21 or Safari 5.1.7 (Windows). jsfiddle.net/V8cvQ/13
    – MrWhite
    Aug 10, 2012 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.