From b6bf511417cddb3414f726761a1674eb0231e37b Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Tue, 1 Oct 2024 11:16:33 -0700 Subject: [PATCH 1/9] Add new pseudo-elements for customizable select 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 https://github.com/w3c/csswg-drafts/issues/10908 --- css-pseudo-4/Overview.bs | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index 6aece116827..d965df2d3fd 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1634,6 +1634,30 @@ Styling form control pickers: the ''::picker()'' pseudo-element </style> +

+Select dropdown icon: the ''::select-arrow'' pseudo-element

+ + The ''::select-arrow'' pseudo-element only matches when the originating + element is a <{select}> element. When its computed 'content' value is not + ''content/none'', this pseudo-element generates a box as if it was an + immediate child of its originating element, with content as specified + by 'content'. + + ''::select-arrow'' is a [=part-like pseudo-element=], so there is no + restriction on which properties apply to the ''::select-arrow'' pseudo-element. + +

+Option checkmark icon: the ''::check'' pseudo-element

+ + The '::check'' pseudo-element only matches when the originating + element is a <{option}> element. When its computed 'content' value is not + ''content/none'', this pseudo-element generates a box as if it was an + immediate child of its originating element, with content as specified + by 'content'. + + ''::check'' is a [=part-like pseudo-element=], so there is no restriction on + which properties apply to the ''::check'' pseudo-element. +

Overlapping Pseudo-element Interactions

@@ -1986,4 +2010,4 @@ Acknowledgements get-computed-style-crash.html svg-text-selection-002.html text-selection.html - \ No newline at end of file + From f9d079e30b04c56924acb90302d4a5bf60fc94e0 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Tue, 1 Oct 2024 15:09:22 -0700 Subject: [PATCH 2/9] add box placement --- css-pseudo-4/Overview.bs | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index d965df2d3fd..e5e6ed805d3 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1638,26 +1638,28 @@ Styling form control pickers: the ''::picker()'' pseudo-element Select dropdown icon: the ''::select-arrow'' pseudo-element The ''::select-arrow'' pseudo-element only matches when the originating - element is a <{select}> element. When its computed 'content' value is not - ''content/none'', this pseudo-element generates a box as if it was an - immediate child of its originating element, with content as specified - by 'content'. + element is a <{select}> element. ''::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 + originating element, preceding any boxes generated by the ''::before'' + pseudo-element, with content as specified by 'content'. +

Option checkmark icon: the ''::check'' pseudo-element

The '::check'' pseudo-element only matches when the originating - element is a <{option}> element. When its computed 'content' value is not - ''content/none'', this pseudo-element generates a box as if it was an - immediate child of its originating element, with content as specified - by 'content'. + element is a <{option}> element. ''::check'' is a [=part-like pseudo-element=], so there is no restriction on which properties apply to the ''::check'' pseudo-element. + ''::check'' generates a box as if it was an immediate child of its + originating element, preceding any boxes generated by the ''::before'' + pseudo-element, with content as specified by 'content'. +

Overlapping Pseudo-element Interactions

From e056ba84a63bc2ed54fd2a8d2e03985465ba9a75 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Mon, 14 Oct 2024 14:49:44 -0700 Subject: [PATCH 3/9] make tree-abiding instead of part-like --- css-pseudo-4/Overview.bs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index e5e6ed805d3..aa4c3a92d3f 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1640,8 +1640,8 @@ Select dropdown icon: the ''::select-arrow'' pseudo-element The ''::select-arrow'' pseudo-element only matches when the originating element is a <{select}> element. - ''::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'' is a [=tree-abiding pseudo-element=]. It accepts all + properties. It inherits from its [=originating element=]. ''::select-arrow'' generates a box as if it was an immediate child of its originating element, preceding any boxes generated by the ''::before'' @@ -1653,8 +1653,8 @@ Option checkmark icon: the ''::check'' pseudo-element The '::check'' pseudo-element only matches when the originating element is a <{option}> element. - ''::check'' is a [=part-like pseudo-element=], so there is no restriction on - which properties apply to the ''::check'' pseudo-element. + ''::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 immediate child of its originating element, preceding any boxes generated by the ''::before'' From 8599e90a52ed1128a97271a4495c0f9f3ac82ea7 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Mon, 14 Oct 2024 15:30:35 -0700 Subject: [PATCH 4/9] fix before/after --- css-pseudo-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index aa4c3a92d3f..af632f7fd38 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1644,7 +1644,7 @@ Select dropdown icon: the ''::select-arrow'' pseudo-element properties. It inherits from its [=originating element=]. ''::select-arrow'' generates a box as if it was an immediate child of its - originating element, preceding any boxes generated by the ''::before'' + originating element, after any boxes generated by the ''::after'' pseudo-element, with content as specified by 'content'.

From 649c35ff5102e93f1993476ebdf10a7d3fcd12d5 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Mon, 14 Oct 2024 15:30:55 -0700 Subject: [PATCH 5/9] remove immediate --- css-pseudo-4/Overview.bs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index af632f7fd38..9cb35d9618b 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1643,7 +1643,7 @@ Select dropdown icon: the ''::select-arrow'' pseudo-element

''::select-arrow'' is a [=tree-abiding pseudo-element=]. It accepts all properties. It inherits from its [=originating element=]. - ''::select-arrow'' generates a box as if it was an immediate child of its + ''::select-arrow'' generates a box as if it was an child of its originating element, after any boxes generated by the ''::after'' pseudo-element, with content as specified by 'content'. @@ -1656,8 +1656,8 @@ Option checkmark icon: the ''::check'' pseudo-element ''::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 immediate child of its - originating element, preceding any boxes generated by the ''::before'' + ''::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'. From ed13323476f1c6c6b200a8724cb2abd0ea25c0c4 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Mon, 14 Oct 2024 15:32:13 -0700 Subject: [PATCH 6/9] matches -> generated --- css-pseudo-4/Overview.bs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index 9cb35d9618b..a7244778a1d 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1637,8 +1637,8 @@ Styling form control pickers: the ''::picker()'' pseudo-element

Select dropdown icon: the ''::select-arrow'' pseudo-element

- The ''::select-arrow'' pseudo-element only matches when the originating - element is a <{select}> element. + The ''::select-arrow'' pseudo-element is only generated when the + originating element is a <{select}> element. ''::select-arrow'' is a [=tree-abiding pseudo-element=]. It accepts all properties. It inherits from its [=originating element=]. @@ -1650,7 +1650,7 @@ Select dropdown icon: the ''::select-arrow'' pseudo-element

Option checkmark icon: the ''::check'' pseudo-element

- The '::check'' pseudo-element only matches when the originating + The '::check'' pseudo-element is only generated when the originating element is a <{option}> element. ''::check'' is a [=tree-abiding pseudo-element=]. It accepts all properties. From 665e052612373a26a27182baa00792a332ea1668 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Mon, 14 Oct 2024 15:34:19 -0700 Subject: [PATCH 7/9] require base appearance --- css-pseudo-4/Overview.bs | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index a7244778a1d..f887bb5ac81 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1638,7 +1638,8 @@ Styling form control pickers: the ''::picker()'' pseudo-element Select dropdown icon: the ''::select-arrow'' pseudo-element The ''::select-arrow'' pseudo-element is only generated when the - originating element is a <{select}> element. + originating element is a <{select}> element with base + appearance. ''::select-arrow'' is a [=tree-abiding pseudo-element=]. It accepts all properties. It inherits from its [=originating element=]. @@ -1651,7 +1652,8 @@ Select dropdown icon: the ''::select-arrow'' pseudo-element Option checkmark icon: the ''::check'' pseudo-element The '::check'' pseudo-element is only generated when the originating - element is a <{option}> element. + 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=]. From 44d2a4038a41310e7403abc48daecc0df0160edb Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Tue, 15 Oct 2024 14:12:44 -0700 Subject: [PATCH 8/9] move to css-forms-1 --- css-forms-1/Overview.bs | 28 ++++++++++++++++++++++++++++ css-pseudo-4/Overview.bs | 29 ----------------------------- 2 files changed, 28 insertions(+), 29 deletions(-) diff --git a/css-forms-1/Overview.bs b/css-forms-1/Overview.bs index 1ef2789719e..fb742afc759 100644 --- a/css-forms-1/Overview.bs +++ b/css-forms-1/Overview.bs @@ -55,6 +55,34 @@ Styling form control pickers: the ''::picker()'' pseudo-element </style> +

+Select dropdown icon: the ''::select-arrow'' pseudo-element

+ + The ''::select-arrow'' pseudo-element is only generated when the + originating element is a <{select}> element with base + appearance. + + ''::select-arrow'' is a [=tree-abiding pseudo-element=]. It accepts all + properties. It inherits from its [=originating element=]. + + ''::select-arrow'' generates a box as if it was an child of its + originating element, after any boxes generated by the ''::after'' + pseudo-element, with content as specified by 'content'. + +

+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'. + Basic Styling Proposals {#ideas} ================================ diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index 6f037210252..0adc2c3da08 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1703,35 +1703,6 @@ details[open]::details-content { } -

-Select dropdown icon: the ''::select-arrow'' pseudo-element

- - The ''::select-arrow'' pseudo-element is only generated when the - originating element is a <{select}> element with base - appearance. - - ''::select-arrow'' is a [=tree-abiding pseudo-element=]. It accepts all - properties. It inherits from its [=originating element=]. - - ''::select-arrow'' generates a box as if it was an child of its - originating element, after any boxes generated by the ''::after'' - pseudo-element, with content as specified by 'content'. - -

-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'. - -

Overlapping Pseudo-element Interactions

From 992a99d0f682718cb9d77658d771f8f52db6955b Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Fri, 22 Nov 2024 11:05:07 -0800 Subject: [PATCH 9/9] dont tie to select --- css-forms-1/Overview.bs | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/css-forms-1/Overview.bs b/css-forms-1/Overview.bs index fb742afc759..fcdcf542a40 100644 --- a/css-forms-1/Overview.bs +++ b/css-forms-1/Overview.bs @@ -55,31 +55,30 @@ Styling form control pickers: the ''::picker()'' pseudo-element </style> -

-Select dropdown icon: the ''::select-arrow'' pseudo-element

+

+Picker opener icon: the ''::picker-icon'' pseudo-element

- The ''::select-arrow'' pseudo-element is only generated when the - originating element is a <{select}> element with base - appearance. + The ''::picker-icon'' pseudo-element is only generated when the + originating element has base appearance and opens a picker. - ''::select-arrow'' is a [=tree-abiding pseudo-element=]. It accepts all + ''::picker-icon'' is a [=tree-abiding pseudo-element=]. It accepts all properties. It inherits from its [=originating element=]. - ''::select-arrow'' generates a box as if it was an child of its + ''::picker-icon'' generates a box as if it was an child of its originating element, after any boxes generated by the ''::after'' pseudo-element, with content as specified by 'content'. -

-Option checkmark icon: the ''::check'' pseudo-element

+

+Checkmark icon: the ''::checkmark'' 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. + The '::checkmark'' pseudo-element is only generated when the originating + element supports the :checked pseudo-class and either has base + appearance or an ancestor with base appearance. - ''::check'' is a [=tree-abiding pseudo-element=]. It accepts all properties. + ''::checkmark'' 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 + ''::checkmark'' 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'.