[css-forms-1] Add new pseudo-elements for customizable select #10986

josepharhar · 2024-10-01T18:20:44Z

This PR adds the ::check and ::select-arrow pseudo-elements so that select elements can have a standardized and customizable dropdown icon on the button and checkmarks next to options.

Fixes #10908

This PR adds the ::check and ::select-icon pseudo-elements so that select elements can have a standardized and customizable dropdown icon on the button and checkmarks next to options. Fixes w3c#10908

josepharhar · 2024-10-01T22:14:26Z

I mostly copied the definitions from before/after. If before/after aren't actually part-like, then should I copy the text from ::backdrop that looks like this instead of saying these pseudos are part like?

The ::backdrop pseudo-element is a tree-abiding pseudo-element. It accepts all properties. It inherits from its originating element.

dbaron

A few comments (and questions) here -- I think they apply equally to both pseudos, but I've only made them once.

dbaron · 2024-10-03T17:56:26Z

css-pseudo-4/Overview.bs

+  restriction on which properties apply to the ''::select-arrow'' pseudo-element.
+
+  ''::select-arrow'' generates a box as if it was an immediate child of its
+  <a>originating element</a>, preceding any boxes generated by the ''::before''


So I'm wondering if the idea that it precedes the ::before is incompatible with being part-like. I'm a little worried that it might be.

I made it not part like anymore. Does that resolve this?

dbaron · 2024-10-03T17:57:15Z

css-pseudo-4/Overview.bs

+
+  ''::select-arrow'' generates a box as if it was an immediate child of its
+  <a>originating element</a>, preceding any boxes generated by the ''::before''
+  pseudo-element, with content as specified by 'content'.


I'm also worried about allowing content here when it doesn't (in reality) work on elements, which part-like pseudo-elements should fully behave like.

I made it not part like anymore. Does that resolve this?

css-pseudo-4/Overview.bs

dbaron · 2024-10-03T17:59:38Z

css-pseudo-4/Overview.bs

+  ''::select-arrow'' is a [=part-like pseudo-element=], so there is no
+  restriction on which properties apply to the ''::select-arrow'' pseudo-element.
+
+  ''::select-arrow'' generates a box as if it was an immediate child of its


Are there conditions on when this generates a box? Does it only do something for appearance: base-select?

Sure, I added the restriction that there must be a select element with base appearance.

lilles · 2024-10-11T18:54:21Z

css-pseudo-4/Overview.bs

+  The '::check'' pseudo-element only matches when the <a>originating
+  element</a> is a <{option}> element.


As I commented in the chromium prototype CL, should this instead say that the pseudo-element is only generated for option elements? That's an observable difference for getComputedStyle(div, '::check').

I changed it to say generated instead of matches

josepharhar · 2024-10-14T22:28:27Z

I mostly copied the definitions from before/after. If before/after aren't actually part-like, then should I copy the text from ::backdrop that looks like this instead of saying these pseudos are part like?

The ::backdrop pseudo-element is a tree-abiding pseudo-element. It accepts all properties. It inherits from its originating element.

It sounds like this is ok, so I copied the text from ::backdrop to make it not part-like anymore

fantasai

Please rebase this over the css-forms-1 draft. :)

Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: I90fb6ef81fd5941709fae6936c7474339a7715e8

Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: I90fb6ef81fd5941709fae6936c7474339a7715e8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5928423 Reviewed-by: Rune Lillesveen <[email protected]> Reviewed-by: Joey Arhar <[email protected]> Commit-Queue: Traian Captan <[email protected]> Cr-Commit-Position: refs/heads/main@{#1369011}

josepharhar · 2024-10-15T21:12:56Z

Please rebase this over the css-forms-1 draft. :)

done

Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: I90fb6ef81fd5941709fae6936c7474339a7715e8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5928423 Reviewed-by: Rune Lillesveen <[email protected]> Reviewed-by: Joey Arhar <[email protected]> Commit-Queue: Traian Captan <[email protected]> Cr-Commit-Position: refs/heads/main@{#1369011}

This pseudo element is added to allow <option> elements inside <select> elements to have a standardized and customizable checkmark icon. Spec definition: ``` Option checkmark icon: the '::check' pseudo-element The '::check' pseudo-element is only generated when the originating element is a option element which has an ancestor select element with base appearance. '::check' is a tree-abiding pseudo-element. It accepts all properties. It inherits from its originating element. '::check' generates a box as if it was an child of its originating element, preceding any boxes generated by the '::before' pseudo-element, with content as specified by 'content'. ``` Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: Ie5058d66f90644f9732bc619a3f587b6203d1cf9

…rt, a=testonly Automatic update from web-platform-tests Add ::check pseudo element parsing support Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: I90fb6ef81fd5941709fae6936c7474339a7715e8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5928423 Reviewed-by: Rune Lillesveen <[email protected]> Reviewed-by: Joey Arhar <[email protected]> Commit-Queue: Traian Captan <[email protected]> Cr-Commit-Position: refs/heads/main@{#1369011} -- wpt-commits: 181e33be283f60d28349f6828782091489684ece wpt-pr: 48625

This pseudo element is added to allow <option> elements inside <select> elements to have a standardized and customizable checkmark icon. Spec definition: ``` Option checkmark icon: the '::check' pseudo-element The '::check' pseudo-element is only generated when the originating element is a option element which has an ancestor select element with base appearance. '::check' is a tree-abiding pseudo-element. It accepts all properties. It inherits from its originating element. '::check' generates a box as if it was an child of its originating element, preceding any boxes generated by the '::before' pseudo-element, with content as specified by 'content'. ``` Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: Ie5058d66f90644f9732bc619a3f587b6203d1cf9

This pseudo element is added to allow <option> elements inside <select> elements to have a standardized and customizable checkmark icon. Spec definition: ``` Option checkmark icon: the '::check' pseudo-element The '::check' pseudo-element is only generated when the originating element is a option element which has an ancestor select element with base appearance. '::check' is a tree-abiding pseudo-element. It accepts all properties. It inherits from its originating element. '::check' generates a box as if it was an child of its originating element, preceding any boxes generated by the '::before' pseudo-element, with content as specified by 'content'. ``` Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: Ie5058d66f90644f9732bc619a3f587b6203d1cf9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5925018 Reviewed-by: Joey Arhar <[email protected]> Reviewed-by: Philip Rogers <[email protected]> Commit-Queue: Traian Captan <[email protected]> Reviewed-by: Kevin Babbitt <[email protected]> Cr-Commit-Position: refs/heads/main@{#1371648}

…rt, a=testonly Automatic update from web-platform-tests Add ::check pseudo element parsing support Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: I90fb6ef81fd5941709fae6936c7474339a7715e8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5928423 Reviewed-by: Rune Lillesveen <[email protected]> Reviewed-by: Joey Arhar <[email protected]> Commit-Queue: Traian Captan <[email protected]> Cr-Commit-Position: refs/heads/main@{#1369011} -- wpt-commits: 181e33be283f60d28349f6828782091489684ece wpt-pr: 48625

…rt, a=testonly Automatic update from web-platform-tests Add ::check pseudo element parsing support Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: I90fb6ef81fd5941709fae6936c7474339a7715e8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5928423 Reviewed-by: Rune Lillesveen <futharkchromium.org> Reviewed-by: Joey Arhar <jarharchromium.org> Commit-Queue: Traian Captan <tcaptanchromium.org> Cr-Commit-Position: refs/heads/main{#1369011} -- wpt-commits: 181e33be283f60d28349f6828782091489684ece wpt-pr: 48625 UltraBlame original commit: e6b51178ca094586c892c9d2a6f69c62d6877aa0

Automatic update from web-platform-tests Add ::check pseudo element This pseudo element is added to allow <option> elements inside <select> elements to have a standardized and customizable checkmark icon. Spec definition: ``` Option checkmark icon: the '::check' pseudo-element The '::check' pseudo-element is only generated when the originating element is a option element which has an ancestor select element with base appearance. '::check' is a tree-abiding pseudo-element. It accepts all properties. It inherits from its originating element. '::check' generates a box as if it was an child of its originating element, preceding any boxes generated by the '::before' pseudo-element, with content as specified by 'content'. ``` Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: Ie5058d66f90644f9732bc619a3f587b6203d1cf9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5925018 Reviewed-by: Joey Arhar <[email protected]> Reviewed-by: Philip Rogers <[email protected]> Commit-Queue: Traian Captan <[email protected]> Reviewed-by: Kevin Babbitt <[email protected]> Cr-Commit-Position: refs/heads/main@{#1371648} -- wpt-commits: da9d7dba3fc527999aeda736950cd9c3270314f8 wpt-pr: 48697

Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: I4161a9a0111ff2247ab6d9009c5bdec96ac1c855 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5967877 Commit-Queue: Traian Captan <[email protected]> Reviewed-by: Joey Arhar <[email protected]> Reviewed-by: Kevin Babbitt <[email protected]> Cr-Commit-Position: refs/heads/main@{#1375343}

…g support, a=testonly Automatic update from web-platform-tests Add ::select-arrow pseudo element parsing support Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: I4161a9a0111ff2247ab6d9009c5bdec96ac1c855 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5967877 Commit-Queue: Traian Captan <[email protected]> Reviewed-by: Joey Arhar <[email protected]> Reviewed-by: Kevin Babbitt <[email protected]> Cr-Commit-Position: refs/heads/main@{#1375343} -- wpt-commits: 2becea8aa06af9b51bb319f001aa880906fb26ec wpt-pr: 48861

…g support, a=testonly Automatic update from web-platform-tests Add ::select-arrow pseudo element parsing support Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: I4161a9a0111ff2247ab6d9009c5bdec96ac1c855 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5967877 Commit-Queue: Traian Captan <tcaptanchromium.org> Reviewed-by: Joey Arhar <jarharchromium.org> Reviewed-by: Kevin Babbitt <kbabbittmicrosoft.com> Cr-Commit-Position: refs/heads/main{#1375343} -- wpt-commits: 2becea8aa06af9b51bb319f001aa880906fb26ec wpt-pr: 48861 UltraBlame original commit: 2653a07709c1a504480fe822fbd193c72ee7d62e

…g support, a=testonly Automatic update from web-platform-tests Add ::select-arrow pseudo element parsing support Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: I4161a9a0111ff2247ab6d9009c5bdec96ac1c855 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5967877 Commit-Queue: Traian Captan <[email protected]> Reviewed-by: Joey Arhar <[email protected]> Reviewed-by: Kevin Babbitt <[email protected]> Cr-Commit-Position: refs/heads/main@{#1375343} -- wpt-commits: 2becea8aa06af9b51bb319f001aa880906fb26ec wpt-pr: 48861

tabatkins · 2024-11-21T23:24:24Z

Per the resolutions from this week's call, these should be renamed to ::checkmark and ::picker-icon.

Also, I thought from the discussion in the call that ::checkmark was meant to reflect the check in a checkbox/radio as well, but this currently defines it to only exist on option elements. I presume this is just old text that doesn't reflect more recent discussion? Similarly, I was under the impression that ::picker-icon would apply to several input types as well, not just select.

josepharhar · 2024-11-22T18:55:35Z

Also, I thought from the discussion in the call that ::checkmark was meant to reflect the check in a checkbox/radio as well, but this currently defines it to only exist on option elements. I presume this is just old text that doesn't reflect more recent discussion? Similarly, I was under the impression that ::picker-icon would apply to several input types as well, not just select.

Yes people were talking about where else these pseudos could be used in order to get better names so they could be used for more things than select and options.

I'm not exactly sure what all the cases these pseudos will be used in yet because I only have a full definition/implementation of base appearance for select and not for all the other form controls.

I changed the definition for ::picker-icon which elements to match to be more vague/generic to support other future elements.

I changed the definition of ::checkmark to apply to anything which supports :checked and has base appearance.

tabatkins · 2024-11-26T23:59:54Z

Ah, k, if that talk about other usage sites was somewhat theoretical, and they'll be handled in a different PR (if at all), then that's fine. I was just a little confused.

Add new pseudo-elements for customizable select

b6bf511

This PR adds the ::check and ::select-icon pseudo-elements so that select elements can have a standardized and customizable dropdown icon on the button and checkmarks next to options. Fixes w3c#10908

josepharhar mentioned this pull request Oct 1, 2024

[css-ui] Pseudo-elements for checkmark and dropdown icon for appearance:base <select> #10908

Closed

add box placement

f9d079e

josepharhar requested a review from dbaron October 1, 2024 22:12

josepharhar mentioned this pull request Oct 3, 2024

Customizable <select> element whatwg/html#9799

Open

dbaron reviewed Oct 3, 2024

View reviewed changes

lilles reviewed Oct 11, 2024

View reviewed changes

make tree-abiding instead of part-like

e056ba8

josepharhar added 4 commits October 14, 2024 15:30

fix before/after

8599e90

remove immediate

649c35f

matches -> generated

ed13323

require base appearance

665e052

fantasai requested changes Oct 15, 2024

View reviewed changes

chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull request Oct 15, 2024

Add ::check pseudo element parsing support

2a0e271

Defined in: w3c/csswg-drafts#10986 Bug: 369319576 Change-Id: I90fb6ef81fd5941709fae6936c7474339a7715e8

chromium-wpt-export-bot mentioned this pull request Oct 15, 2024

Add ::check pseudo element parsing support web-platform-tests/wpt#48625

Merged

josepharhar added 2 commits October 15, 2024 14:10

Merge branch 'main' into selecticons

ee87eb9

move to css-forms-1

44d2a40

josepharhar changed the title ~~[css-pseudo-4] Add new pseudo-elements for customizable select~~ [css-forms-1] Add new pseudo-elements for customizable select Oct 15, 2024

chromium-wpt-export-bot mentioned this pull request Oct 18, 2024

Add ::check pseudo element web-platform-tests/wpt#48697

Merged

chromium-wpt-export-bot mentioned this pull request Oct 29, 2024

Add ::select-arrow pseudo element parsing support web-platform-tests/wpt#48861

Merged

dont tie to select

992a99d

josepharhar force-pushed the selecticons branch from 249219d to 992a99d Compare November 22, 2024 19:06

tabatkins merged commit dbde8fa into w3c:main Nov 27, 2024
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-forms-1] Add new pseudo-elements for customizable select #10986

[css-forms-1] Add new pseudo-elements for customizable select #10986

josepharhar commented Oct 1, 2024 •

edited by nt1m

Loading

josepharhar commented Oct 1, 2024

dbaron left a comment

dbaron Oct 3, 2024

josepharhar Oct 14, 2024

dbaron Oct 3, 2024

josepharhar Oct 14, 2024

dbaron Oct 3, 2024

josepharhar Oct 14, 2024

lilles Oct 11, 2024

josepharhar Oct 14, 2024

josepharhar commented Oct 14, 2024

fantasai left a comment

josepharhar commented Oct 15, 2024

tabatkins commented Nov 21, 2024 •

edited

Loading

josepharhar commented Nov 22, 2024

tabatkins commented Nov 26, 2024

		The '::check'' pseudo-element only matches when the <a>originating
		element</a> is a <{option}> element.

[css-forms-1] Add new pseudo-elements for customizable select #10986

[css-forms-1] Add new pseudo-elements for customizable select #10986

Conversation

josepharhar commented Oct 1, 2024 • edited by nt1m Loading

josepharhar commented Oct 1, 2024

dbaron left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

josepharhar commented Oct 14, 2024

fantasai left a comment

Choose a reason for hiding this comment

josepharhar commented Oct 15, 2024

tabatkins commented Nov 21, 2024 • edited Loading

josepharhar commented Nov 22, 2024

tabatkins commented Nov 26, 2024

josepharhar commented Oct 1, 2024 •

edited by nt1m

Loading

tabatkins commented Nov 21, 2024 •

edited

Loading