Can I use a :before or :after pseudo-element on an input field?

by

:before and :after render inside a container

and <input> can not contain other elements.

Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered is within the container itself as a child element. input can not contain other elements hence they’re not supported. A button on the other hand that’s also a form element supports them, because it’s a container of other sub-elements.

If you ask me, if some browser does display these two pseudo-elements on non-container elements, it’s a bug and a non-standard conformance. Specification directly talks about element content…

W3C specification

If we carefully read the specification it actually says that they are inserted inside a containing element:

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element’s document tree content. The ‘content’ property, in conjunction with these pseudo-elements, specifies what is inserted.

See? an element’s document tree content. As I understand it this means within a container.

More Related Contents:

  1. CSS content property: is it possible to insert HTML instead of Text?
  2. CSS data attribute new line character & pseudo-element content value
  3. Using attr(data-icon) property to display unicode before element
  4. after pseudo element not appearing in code
  5. Font Awesome 5 on pseudo elements shows square instead of icon
  6. Html/Css Triangle with pseudo elements
  7. Adding HTML entities using CSS content
  8. :after and :before CSS pseudo elements hack for Internet Explorer 7
  9. Elongated hexagon shaped button using only one element
  10. Using CSS :before and :after pseudo-elements with inline CSS?
  11. Why does a filter gradient on a pseudo element not work in IE8?
  12. How can I use the CSS pseudo-element :before{ content: ” } to affect an element?
  13. Can a ::before selector be used with a ?
  14. Which elements support the ::before and ::after pseudo-elements?
  15. pseudo-element acting like a grid item in CSS grid
  16. Adding text before list
  17. height: 100% or min-height: 100% for html and body elements?
  18. Render a string in HTML and preserve spaces and linebreaks
  19. Bootstrap 3 collapsed menu doesn’t close on click
  20. How to change text transparency in HTML/CSS?
  21. Using :before and :after CSS selector to insert HTML [duplicate]
  22. Prevent “overscrolling” of web page
  23. Different CSS for each browser?
  24. CSS: image link, change on hover
  25. How to make a stable two column layout in HTML/CSS
  26. Why is translateY(-50%) needed to center an element which is at top: 50%?
  27. Transparent scrollbar with css
  28. Why would Google use a font tag?
  29. Styling the “ element in CSS?
  30. inline-block element with no text renders differently

Leave a Comment