Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-ui] appearance-disabling-properties should contain pseudoelements #9168

Open
Im-Beast opened this issue Aug 6, 2023 · 4 comments
Open

[css-ui] appearance-disabling-properties should contain pseudoelements #9168

Im-Beast opened this issue Aug 6, 2023 · 4 comments
Labels
css-ui-4 Current Work topic: form controls

Comments

@Im-Beast
Copy link

Im-Beast commented Aug 6, 2023

Spec should include pseudoelements (::before and ::after) as properties that disable native appearance.
Current behaviour is not coherent:

  • Chrome/Chromium already does that
  • Webkit does too
  • Firefox however doesn't, it requires appearance: none; to be set to allow pseudoelements to exist.

Sample code:

<html>
  <head>
    <style>
      .style-me::before {
        content: "Hello";
      }
    </style>
  </head>
  <body>
    <input type="checkbox" class="style-me" />
  </body>
</html>

Result:
Left – Chromium 115.0.5790.110
Center – Epiphany 44.2
Right - Firefox 115.0.2
image

Expected result:
Firefox has pseudoelement with content "Hello".

Spec section:
https://drafts.csswg.org/css-ui-4/#appearance-disabling-properties
@Loirooriol
Copy link
Contributor

Using ::before doesn't disable native appearance on Blink.

I think what happens is that Blink is using shadow DOM, so actual children of the element are not shown, but pseudo-elements are added after flattening the tree.

Firefox probably ignores the contents during layout instead of relying on shadow DOM.

@Im-Beast
Copy link
Author

Im-Beast commented Aug 7, 2023 •
edited
Loading

Well, sorry about misguiding about what happens in this issue, I just thought that's the most reasonable way it could work.
I'm not a browser specialist, so if this issue should be renamed or some details should be changed please let me know.

@fantasai fantasai added the css-ui-4 Current Work label Jan 9, 2024
@annevk
Copy link
Member

annevk commented Mar 6, 2024

I think we actually want to align on Gecko's behavior as much as possible. If you don't want to have native appearance, you need to explicitly opt out of it using appearance: none. And that in turn gives you access to pseudo elements and such. That's a much clearer story than certain properties sometimes influencing this.

cc @mfreed7 @emilio

@emilio
Copy link
Collaborator

emilio commented Mar 6, 2024

So whether something allows ::before and ::after only depends on whether its box is replaced. Checkboxes are replaced so shouldn't get pseudo-elements just like <input type=text> or what not.

So yeah, I think Firefox is correct here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-ui-4 Current Work topic: form controls
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@fantasai @emilio @annevk @nt1m @Loirooriol @Im-Beast