1157575 - <input type="checkbox"> doesn't display :before/:after pseudo-elements

Status: RESOLVED DUPLICATE of bug 241985

(Core :: Layout: Form Controls, defect)

Description

[Sebastian Zartner [:sebo]]

Checkboxes currently don't allow to set pseudo-elements, namely ::before and ::after, on them.

In the related specs[1][2] there doesn't seem to be any restriction like this. 
Also, <input type="text"> displays pseudo-elements. Furthermore Blink and WebKit display the pseudo-elements for <input type="text">.
So this seems to be a bug in Gecko.

This was found regarding bug 987365 comment 18.

Sebastian

[1] http://dev.w3.org/csswg/selectors-3/#gen-content
[2] http://dev.w3.org/csswg/css-pseudo-4/#generated-content

Comment 2

[Boris Zbarsky [:bzbarsky]]

> there doesn't seem to be any restriction like this

Looking at the second link you gave:

  When their computed content value is not none, these pseudo-elements generate boxes as if
  they were immediate children of their originating element.

So per spec your example:

  data:text/html,<!DOCTYPE%20html><style>input::after{content:attr(value);}</style><input%20type="checkbox"%20value="test"/>

should render identically to this markup:

  data:application/xhtml+xml,<html%20xmlns="http://www.w3.org/1999/xhtml"><input%20type="checkbox"%20value="test">test</input></html>

and in fact it does.

As for the first link, it doesn't define behavior at all, but just refers to CSS 2.1 for the definition.  http://www.w3.org/TR/CSS21/generate.html#before-after-content says:

  The :before and :after pseudo-elements interact with other boxes as if they were real
  elements inserted just inside their associated element.

which matches the CSS4 definition.

> Also, <input type="text"> displays pseudo-elements.

No, it doesn't, for the exact same reason.  Simple testcase:

  data:text/html,<!DOCTYPE%20html><style>input::after{content:attr(val);}</style><input%20type="text"%20val="test"/>

> Furthermore Blink and WebKit display the pseudo-elements for <input type="text">

They don't for my simple testcase, for the exact same reason.

Comment 3

[Sebastian Zartner [:sebo]]

(In reply to Not doing reviews right now from comment #2)
> > there doesn't seem to be any restriction like this
> 
> Looking at the second link you gave:
> 
>   When their computed content value is not none, these pseudo-elements
> generate boxes as if
>   they were immediate children of their originating element.
> 
> So per spec your example:
> 
>  
> data:text/html,<!DOCTYPE%20html><style>input::after{content:attr(value);}</
> style><input%20type="checkbox"%20value="test"/>
> 
> should render identically to this markup:
> 
>  
> data:application/xhtml+xml,<html%20xmlns="http://www.w3.org/1999/
> xhtml"><input%20type="checkbox"%20value="test">test</input></html>
> 
> and in fact it does.
> 
> As for the first link, it doesn't define behavior at all, but just refers to
> CSS 2.1 for the definition. 
> http://www.w3.org/TR/CSS21/generate.html#before-after-content says:
> 
>   The :before and :after pseudo-elements interact with other boxes as if
> they were real
>   elements inserted just inside their associated element.
> 
> which matches the CSS4 definition.
> 
> > Also, <input type="text"> displays pseudo-elements.
> 
> No, it doesn't, for the exact same reason.  Simple testcase:
> 
>  
> data:text/html,<!DOCTYPE%20html><style>input::after{content:attr(val);}</
> style><input%20type="text"%20val="test"/>
> 

You are right. I realized that afterwards.

> > Furthermore Blink and WebKit display the pseudo-elements for <input type="text">
> 
> They don't for my simple testcase, for the exact same reason.

Careless mistake on my side. For type="text" I still used value="test" like for type="checkbox".
So the implementation in Gecko is correct and is wrong in Blink/WebKit for several input types.

Sebastian

Comment 4

[Sebastian Zartner [:sebo]]

> So the implementation in Gecko is correct and is wrong in Blink/WebKit for several input types.

For reference:
https://code.google.com/p/chromium/issues/detail?id=480891

Sebastian

Comment 5

[kevin]

Test case: https://s.codepen.io/kevinSuttle/debug/OXybrJ