RESOLVED INVALID 37208
css content set on INPUT pseudo-classes (like :after) do not render 
https://bugs.webkit.org/show_bug.cgi?id=37208
Summary css content set on INPUT pseudo-classes (like :after) do not render
Marques Johansson
Reported 2010-04-07 08:27:14 PDT
An INPUT element will not render content supplied in the style-sheet's :after or :before pseudo-class for the element. <html><head><style>#test:before {content:"before"} #test:after {content:"after"}</style></head><body><form><input id="test" type="text"></form></body></html> Of Chrome, IE8, Firefox, and Opera, only Opera rendered the "before" and "after" text as expected. Reproducible: Always Steps to Reproduce: 1. Create an INPUT element 2. Try to add style-sheet content via a :before or :after pseudo-class Actual Results: The pseudo-class content is not rendered. Expected Results: The pseudo-class content should be rendered. http://www.w3.org/TR/CSS2/selector.html#before-and-after http://www.w3.org/TR/CSS2/generate.html
Attachments
Add attachment proposed patch, testcase, etc.
Marques Johansson
Comment 1 2010-04-07 09:08:13 PDT
I don't know if Webkit developers agree, but for reference I also reported this to Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=557306 And they marked it as a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=241985 which is marked invalid for the following stated reasons: "This isn't supposed to work; :before and :after create new first/last children, and input doesn't display its children." and "Generated content on "replaced elements" has been disabled (per CSS 2.1). (FORM elements aren't really replaced like IMG, but they behave the same.)" Where do you stand on this?
Marques Johansson
Comment 2 2010-04-07 09:25:35 PDT
I already provided this link, but the relevant section seems to be http://www.w3.org/TR/CSS2/generate.html#before-after-content "Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification." Based on the examples given it would seem that the :after content should be seen as equivalent to <input><span></span></input> which one would not expect to render. But the examples are also prefaced with: "The :before and :after pseudo-elements elements interact with other boxes, such as run-in boxes, as if they were real elements inserted just inside their associated element." They weren't specific about how inline-blocks or 'replaced elements' should handle this.
Ahmad Saleem
Comment 3 2022-06-16 16:12:32 PDT
I changed test case from Comment 01 in JSFiddle and it is rendering fine and showing INPUT field in result window using Safari 15.5 on macOS 12.4. This is consistent with Chrome Canary 105 and Firefox 103. Test case - https://jsfiddle.net/x6umoeL9/ Is it something fixed along the lines? I think this can be marked as "RESOLVED CONFIGURATION CHANGED", since it is now working across all browser and rendering "input" field properly. Thanks!
Ryosuke Niwa
Comment 4 2022-06-16 23:02:44 PDT
I don't think the replaced elements can have before/after content since before/after pseudo elements aren't (despite of the very much misleading names) conceptually adjacent to the matching element but rather inside the element.
Note You need to log in before you can comment on or make changes to this bug.