Editorial review: Document customizable <select> elements #38470

chrisdavidmills · 2025-03-05T18:09:15Z

Description

Chrome 134 supports customizable <select> elements (see https://chromestatus.com/feature/5737365999976448).

This includes a multitude of sub-features, which are as follows:

The <selectedcontent> element mirrors the currently-selected <option> contents. This is the content visible inside the closed <select> element, otherwise known as the select <button>.
The ::picker(select) pseudo-element, which targets the entire contents of the select drop-down menu, otherwise known as the picker.
The appearance property value base-select, which opts the <select> element and the ::picker(select) pseudo-element into the browser-defined default styles and behavior for customizable select.
The :open pseudo-class, which can now target the select <button> when the picker (::picker(select)) is open.
The ::picker-icon pseudo-element, which targets the picker icon inside the select <button> — the little down-facing arrow on the inline-end side.
The :checked pseudo-class, which can now target the currently-selected <option> element.
The ::checkmark pseudo-element, which targets the checkmark placed inside the currently-selected <option> element to provide a visual indication of which one is selected.

In addition, the select <button> and the picker have the following behavior assigned to them automatically:

They have an invoker/popover relationship, as specified by the Popover API.
They have an implicit anchor reference, meaning that the picker is automatically positioned relative to the select <button> via CSS anchor positioning.

This PR aims to document all of the above new/updated features, and:

provide a guide to creating customizable <select>s.

Motivation

Additional details

Related issues and pull requests

Fixes #37857

BCD: mdn/browser-compat-data#26171

github-actions · 2025-03-05T18:11:17Z

Preview URLs (30 pages)

Flaws (40)

Note! 16 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes
Title: UI pseudo-classes
Flaw count: 2

broken_links:
- /en-US/docs/Glossary/void_element is ill cased
macros:
- Macro produces link /en-US/docs/Glossary/void_element which is a redirect

URL: /en-US/docs/Learn_web_development/Extensions/Forms/Other_form_controls
Title: Other form controls
Flaw count: 2

broken_links:
- /en-US/docs/Glossary/void_element is ill cased
macros:
- Macro produces link /en-US/docs/Glossary/void_element which is a redirect

URL: /en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data
Title: Sending form data
Flaw count: 2

broken_links:
- /en-US/docs/Glossary/submit_button is ill cased
macros:
- Macro produces link /en-US/docs/Glossary/submit_button which is a redirect

URL: /en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls
Title: Basic native form controls
Flaw count: 2

broken_links:
- /en-US/docs/Glossary/void_element is ill cased
macros:
- Macro produces link /en-US/docs/Glossary/void_element which is a redirect

URL: /en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types
Title: The HTML5 input types
Flaw count: 2

broken_links:
- /en-US/docs/Web/API/validityState/typeMismatch is ill cased
macros:
- Macro produces link /en-US/docs/Web/API/validityState/typeMismatch which is a redirect

URL: /en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form
Title: Your first form
Flaw count: 2

broken_links:
- /en-US/docs/Glossary/void_element is ill cased
macros:
- Macro produces link /en-US/docs/Glossary/void_element which is a redirect

URL: /en-US/docs/Learn_web_development/Extensions/Forms/Sending_forms_through_JavaScript
Title: Sending forms through JavaScript
Flaw count: 2

broken_links:
- /en-US/docs/Glossary/progressive_web_apps is ill cased
macros:
- Macro produces link /en-US/docs/Glossary/progressive_web_apps which is a redirect

URL: /en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls
Title: How to build custom form controls
Flaw count: 6

broken_links:
- /en-US/docs/Web/API/element/classList is ill cased
- /en-US/docs/Web/API/element/querySelector is ill cased
- /en-US/docs/Web/API/element/querySelectorAll is ill cased
macros:
- Macro produces link /en-US/docs/Web/API/element/classList which is a redirect
- Macro produces link /en-US/docs/Web/API/element/querySelector which is a redirect
- Macro produces link /en-US/docs/Web/API/element/querySelectorAll which is a redirect

URL: /en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers
Title: HTML forms in legacy browsers
Flaw count: 1

unknown:
- No generic content config found

URL: /en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
Title: Customizable select elements
Flaw count: 3

broken_links:
- /en-US/docs/Glossary/top_layer is ill cased
macros:
- Macro produces link /en-US/docs/Glossary/top_layer which is a redirect
- Can't resolve /en-US/docs/Web/CSS/@starting-state

URL: /en-US/docs/Web/API/Popover_API/Using
Title: Using the Popover API
Flaw count: 8

broken_links:
- /en-US/docs/Glossary/top_layer is ill cased
- /en-US/docs/Glossary/top_layer is ill cased
- /en-US/docs/Glossary/inset_properties is ill cased
- /en-US/docs/Glossary/top_layer is ill cased
macros:
- Macro produces link /en-US/docs/Glossary/top_layer which is a redirect
- Macro produces link /en-US/docs/Glossary/top_layer which is a redirect
- Macro produces link /en-US/docs/Glossary/inset_properties which is a redirect
- Macro produces link /en-US/docs/Glossary/top_layer which is a redirect

URL: /en-US/docs/Web/HTML/Element/button
Title: <button>: The Button element
Flaw count: 4

broken_links:
- /en-US/docs/Glossary/user_agent is ill cased
- /en-US/docs/Glossary/accessible_name is ill cased
macros:
- Macro produces link /en-US/docs/Glossary/user_agent which is a redirect
- Macro produces link /en-US/docs/Glossary/accessible_name which is a redirect

URL: /en-US/docs/Web/HTML/Element/select
Title: <select>: The HTML Select element
Flaw count: 2

broken_links:
- /en-US/docs/Glossary/user_agent is ill cased
macros:
- Macro produces link /en-US/docs/Glossary/user_agent which is a redirect

URL: /en-US/docs/Web/CSS/CSS_anchor_positioning/Using
Title: Using CSS anchor positioning
Flaw count: 2

broken_links:
- /en-US/docs/Glossary/inset_properties is ill cased
macros:
- Macro produces link /en-US/docs/Glossary/inset_properties which is a redirect

External URLs (85)

URL: /en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes
Title: UI pseudo-classes

URL: /en-US/docs/Learn_web_development/Extensions/Forms/Other_form_controls
Title: Other form controls

URL: /en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data
Title: Sending form data

https://developer.chrome.com/docs/devtools/ (1 time)
https://en.wikipedia.org/wiki/SQL (1 time)
https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html (1 time)
https://flask.palletsprojects.com/ (2 times)
https://getlaminas.org/ (1 time)
https://github.com/web2py/web2py (1 time)
https://httpd.apache.org/ (1 time)
https://infosec.mozilla.org/guidelines/web_security (1 time)
https://jinja.palletsprojects.com/ (1 time)
https://laravel.com/ (1 time)
https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html (1 time)
https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html (1 time)
https://nextjs.org/ (1 time)
https://nginx.org/ (1 time)
https://nuxt.com/ (1 time)
https://owasp.org/ (1 time)
https://py4web.com/ (1 time)
https://remix.run/ (1 time)
https://rubyonrails.org/ (1 time)
https://spring.io/guides/gs/handling-form-submission/ (1 time)
https://symfony.com/ (1 time)
https://tomcat.apache.org/ (1 time)
https://www.apachefriends.org/download.html (1 time)
https://www.iis.net/ (1 time)
https://www.mamp.info/en/downloads/ (1 time)
https://www.php.net/ (1 time)

URL: /en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls
Title: Basic native form controls

URL: /en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types
Title: The HTML5 input types

https://mdn.github.io/learning-area/html/forms/basic-input-examples/ (1 time)

URL: /en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form
Title: Your first form

URL: /en-US/docs/Learn_web_development/Extensions/Forms/Form_validation
Title: Client-side form validation

URL: /en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls
Title: How to build custom form controls

https://addons.mozilla.org/fr/firefox/addon/noscript/ (1 time)
https://chromewebstore.google.com/detail/scriptblock/hcdjknjpbnhdoabbngpmfekaecnpajba (1 time)
https://en.wikipedia.org/wiki/Usability_testing (1 time)
https://github.com/marghoobsuleman/ms-Dropdown (1 time)
https://jqueryui.com/ (1 time)
https://www.apple.com/accessibility/vision/ (1 time)
https://www.nvaccess.org/ (1 time)
https://www.smashingmagazine.com/ (1 time)
https://www.uxmatters.com/ (1 time)
https://www.w3.org/TR/wai-aria/ (1 time)
https://www.webaxe.org/accessible-custom-select-dropdowns/ (1 time)

URL: /en-US/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form
Title: How to structure a web form

URL: /en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers
Title: HTML forms in legacy browsers

URL: /en-US/docs/Web/API/HTMLSelectedContentElement
Title: HTMLSelectedContentElement

https://github.com/whatwg/html/pull/10633 (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/HTML/Element/selectedcontent
Title: <selectedcontent>: The selected option display element

https://github.com/whatwg/html/pull/10633 (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2025-03-10 17:16:57)

… unneeded links

hamishwillee · 2025-03-25T01:14:55Z

files/en-us/learn_web_development/extensions/forms/styling_web_forms/index.md

@@ -62,6 +62,8 @@ The article [Advanced form styling](/en-US/docs/Learn_web_development/Extensions
 - [`<input type="range">`](/en-US/docs/Web/HTML/Element/input/range)
 - [`<input type="file">`](/en-US/docs/Web/HTML/Element/input/file)
 - Elements involved in creating dropdown widgets, including {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} and {{HTMLElement("datalist")}}.
+  > [!NOTE]
+  > Modern browsers now support [Customizable select elements](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select), a set of HTML and CSS features that together enable full customization of `<select>` elements and their contents just like any regular DOM elements.


Updated to "Some", same as your edit suggestion in the "Advanced..." article.

hamishwillee · 2025-03-25T01:16:40Z

files/en-us/web/api/popover_api/using/index.md

@@ -385,7 +389,7 @@ You can see an isolated example of this in our [Popover positioning example](htt

 There is another useful positioning option that the Popover API provides. If you want to position a popover relative to its invoker rather than the viewport or a positioned ancestor, you can take advantage of the fact that popovers and their invokers have an **implicit anchor reference**.

-Associating any kind of popover with its invoker using the [`popovertarget`](/en-US/docs/Web/HTML/Element/button#popovertarget) attribute or the `source` option of the {{domxref("HTMLElement.showPopover()")}} or {{domxref("HTMLElement.togglePopover()")}} methods creates an implicit anchor reference between the two. This causes the invoker to become the popover's **anchor element**, meaning that you can position the popover relative to it via [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning).
+[Associating any kind of popover with its invoker](#other_ways_to_set_up_a_popover-invoker_relationship) creates an implicit anchor reference between the two. This causes the invoker to become the popover's **anchor element**, meaning that you can position the popover relative to it via [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning).


Suggested change

[Associating any kind of popover with its invoker](#other_ways_to_set_up_a_popover-invoker_relationship) creates an implicit anchor reference between the two. This causes the invoker to become the popover's **anchor element**, meaning that you can position the popover relative to it via [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning).

[Associating any kind of popover with its invoker](#other_ways_to_set_up_a_popover-invoker_relationship) creates an implicit anchor reference between the two. This causes the invoker to become the popover's **anchor element**, meaning that you can position the popover relative to it using [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning).

hamishwillee · 2025-03-25T01:24:07Z

files/en-us/web/css/_doublecolon_checkmark/index.md

+
+{{CSSRef}}
+
+The **`::checkmark`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) targets the checkmark placed inside the currently-selected {{htmlelement("option")}} element of a [customizable select element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) to provide a visual indication of which one is selected.


Is "targets" the right word? I'd tend to use that as a synonym for selects OR if there is a checkmark by default (which depends on the UA probably).
Perhaps:

Suggested change

The **`::checkmark`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) targets the checkmark placed inside the currently-selected {{htmlelement("option")}} element of a [customizable select element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) to provide a visual indication of which one is selected.

The **`::checkmark`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) styles a checkmark placed inside the currently-selected {{htmlelement("option")}} element of a [customizable select element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select). It might be used to provide (or remove) a visual indication of which option is selected.

"Targets" is the right word, IMO. A selector targets one or more things to style on the page. You need the whole rule to actually do the styling.

I've updated the last bit as suggested, except I haven't included "(or remove)" — I think it is enough to imply this, and I don't want to encourage people to get rid of useful UX features any more than necessary.

hamishwillee · 2025-03-25T01:26:00Z

files/en-us/web/css/_doublecolon_checkmark/index.md

+### Parameters
+
+None.
+


Do pseudo elements ever have parameters? Not sure, but looking at other ones, they don't.

Suggested change

### Parameters

None.

Yes, they do. See ::picker() and ::part() as examples.

I don't need to add the "Parameters" section if it doesn't take parameters tho, so I've removed it.

hamishwillee · 2025-03-25T01:27:27Z

files/en-us/web/css/_doublecolon_checkmark/index.md

+::checkmark {
+  /* ... */
+}
+```


Are there any restrictions on properties that can be styled? For example ::highlight() only allows a subset.

In this case, no. I do tend to point out the limitations, in such cases.

hamishwillee · 2025-03-25T01:28:13Z

files/en-us/web/css/_doublecolon_checkmark/index.md

+
+> [!NOTE]
+> The `::checkmark` pseudo-element is not included in the accessibility tree, so any generated {{cssxref("content")}} set on it will not be announced by assistive technologies. You should still make sure that any new icon you set visually makes sense for its intended purpose.
+


Pseudo elements often have a section on Accessibility - are there any concerns or notes to add here?

Not as far as I know.

hamishwillee · 2025-03-25T01:29:27Z

files/en-us/web/css/_doublecolon_checkmark/index.md

+
+## Description
+
+The `::checkmark` pseudo-element targets the checkmark placed inside a [customizable select element's](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) currently-selected `<option>`.


"targets"? (as above)

hamishwillee · 2025-03-25T01:29:56Z

files/en-us/web/css/_doublecolon_checkmark/index.md

+
+The `::checkmark` pseudo-element targets the checkmark placed inside a [customizable select element's](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) currently-selected `<option>`.
+
+It is only available to target when the originating element has a picker and has base appearance set on it via the {{cssxref("appearance")}} property `base-select` value. Its generated box appears before any boxes generated by the {{cssxref("::before")}} pseudo-element, with the icon specified in default browser stylesheet; you can customize it using the {{cssxref("content")}} property.


"with the icon specified in default browser stylesheet" - if it is

It is in Chrome, certainly.

hamishwillee · 2025-03-25T01:30:44Z

files/en-us/web/css/_doublecolon_checkmark/index.md

+}
+```
+
+Assuming [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) is being used to lay out the `<option>` elements (which it is by default in customizable selects), you could then move the checkmark from the start of the row to the end by setting an {{cssxref("order")}} value on it greater than `0`, and aligning it to the end of the row using an `auto` {{cssxref("margin-left")}} value (see [Alignment and auto margins](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox#alignment_and_auto_margins)).


(which it is by default in customizable selects)

Is that true according to spec, or just Chrome?

It doesn't say this in the spec, but it is definitely true in Chrome. I've removed the parens.

hamishwillee · 2025-03-25T01:31:48Z

files/en-us/web/css/_doublecolon_checkmark/index.md

+
+Assuming [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) is being used to lay out the `<option>` elements (which it is by default in customizable selects), you could then move the checkmark from the start of the row to the end by setting an {{cssxref("order")}} value on it greater than `0`, and aligning it to the end of the row using an `auto` {{cssxref("margin-left")}} value (see [Alignment and auto margins](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox#alignment_and_auto_margins)).
+
+The value of the {{cssxref("content")}} property could also be set to a different emoji, to set a different icon to display.


Suggested change

The value of the {{cssxref("content")}} property could also be set to a different emoji, to set a different icon to display.

The value of the {{cssxref("content")}} property could also be set to a different emoji to change the displayed icon.

hamishwillee · 2025-03-25T01:33:21Z

files/en-us/web/css/_doublecolon_picker-icon/index.md

+### Parameters
+
+None.
+


Suggested change

### Parameters

None.

hamishwillee · 2025-03-25T01:33:38Z

files/en-us/web/css/_doublecolon_picker-icon/index.md

+
+{{CSSRef}}
+
+The **`::picker-icon`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) targets the picker icon inside form controls that have an icon associated with them. In the case of a [customizable select element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select), it selects the down-facing arrow on the inline-end side of the `<select>` element.


targets? (see previous comment - might be OK, just checking)

See previous comments on "it selects the down-facing arrow on the inline-end side of the <select> element."

Do we need an accessibility section

Yup.

Updated to "...it selects the arrow icon shown on the <select> element that points down when it is closed."

No

hamishwillee · 2025-03-25T01:41:08Z

files/en-us/web/css/_doublecolon_picker-icon/index.md

+{{CSSRef}}
+
+The **`::picker-icon`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) targets the picker icon inside form controls that have an icon associated with them. In the case of a [customizable select element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select), it selects the down-facing arrow on the inline-end side of the `<select>` element.
+


It is common to have a try-it example up the top (this is true for all cases).
This would not be too hard - you could cut back the one one the customized page to minimize the number of elements and their styling to just cover the icon

If that happened to have the SVG below that would be OK. But I would make that a local file as it would not add to the information that is relevant to this topic.

We don't tend to add try it examples to pages when they are only supported in one engine; at least, that is my understanding.

At least interactive examples are easier to add now - they are done with inline code rather than needing to be in the interactive-examples repo.

hamishwillee · 2025-03-25T01:42:05Z

files/en-us/web/css/_doublecolon_checkmark/index.md

+{{CSSRef}}
+
+The **`::checkmark`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) targets the checkmark placed inside the currently-selected {{htmlelement("option")}} element of a [customizable select element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) to provide a visual indication of which one is selected.
+


See https://github.com/mdn/content/pull/38470/files#r2011152685 - interactive example is usually present, and this would not be very hard to do because you'd just cut back the existing ones.

see above comment.

hamishwillee · 2025-03-25T01:43:53Z

files/en-us/web/css/_doublecolon_picker/index.md

+
+{{CSSRef}}
+
+The **`::picker()`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the picker part of an element, for example the drop-down picker of a [customizable select element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select).


Suggested change

The **`::picker()`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the picker part of an element, for example the drop-down picker of a [customizable select element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select).

The **`::picker()`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) selects the picker part of an element, for example the drop-down picker of a [customizable select element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select).

I'd prefer "target" to keep it consistent with other pages in this PR. Updated it to that.

Quite a few pseudo-element pages use "represent", which is also OK, imo — pseudo-elements actually exist on the page as boxes, and they represent specific items that are not DOM elements. They can also be included in stylesheets as selectors, that select those pseudo-elements.

hamishwillee · 2025-03-25T01:44:21Z

files/en-us/web/css/_doublecolon_picker/index.md

+
+## Description
+
+The `::picker()` pseudo-element targets the picker part of a form control, that is, the pop-up part that appears to allow you to make a selection when you press the control button. It is only available to target when the originating element has a picker and has base appearance set on it via the {{cssxref("appearance")}} property `base-select` value.


Suggested change

The `::picker()` pseudo-element targets the picker part of a form control, that is, the pop-up part that appears to allow you to make a selection when you press the control button. It is only available to target when the originating element has a picker and has base appearance set on it via the {{cssxref("appearance")}} property `base-select` value.

The `::picker()` pseudo-element selects the picker part of a form control, that is, the pop-up part that appears to allow you to make a selection when you press the control button. It is only available to target when the originating element has a picker and has base appearance set on it via the {{cssxref("appearance")}} property `base-select` value.

I think I prefer targets.

hamishwillee · 2025-03-25T01:45:56Z

files/en-us/web/css/_doublecolon_picker/index.md

+  position-area: block-end span-inline-end;
+  ```
+
+- The browser default styles also define some position try fallbacks that reposition the picker if it is in danger of overflowing the viewport. Position try fallback are explained in [Handling overflow: try fallbacks and conditional hiding](/en-US/docs/Web/CSS/CSS_anchor_positioning/Try_options_hiding). For reference, the related default fallback styles are as follows:


position-try?

Agreed; updated

hamishwillee · 2025-03-25T01:46:23Z

files/en-us/web/css/_doublecolon_picker/index.md

+
+### Basic custom select usage
+
+To opt-in to customizable select functionality, the `<select>` element and its picker both need to have an {{cssxref("appearance")}} value of `base-select` set on them:


See previous comments about what base-select is doing.

Updated to use the same wording used in the guide.

hamishwillee · 2025-03-25T01:55:00Z

files/en-us/web/html/element/option/index.md

@@ -53,9 +53,13 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib

 ## Styling with CSS

-Styling the **`<option>`** element inside a `<select>` dropdown is highly limited and depends on the browser and operating system. Depending on the operating system, the [`font-size`](/en-US/docs/Web/CSS/font-size) of the owning `<select>` is respected in Firefox and Chromium. Chromium may additionally allow [`color`](/en-US/docs/Web/CSS/color), [`background-color`](/en-US/docs/Web/CSS/background-color), [`font-family`](/en-US/docs/Web/CSS/font-family), [`font-variant`](/en-US/docs/Web/CSS/font-variant), and [`text-align`](/en-US/docs/Web/CSS/text-align) to be set.
+Styling `<option>` elements has historically been highly limited, hence features being introduced to enable their full customization, just like any regular DOM element. See [Customizable select elements](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) for more details.


Suggested change

Styling `<option>` elements has historically been highly limited, hence features being introduced to enable their full customization, just like any regular DOM element. See [Customizable select elements](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) for more details.

Styling `<option>` elements has historically been highly limited. [Customizable select elements](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) explains newer features that enable their full customization, just like any regular DOM element.

I like it; updated!

hamishwillee · 2025-03-25T01:59:23Z

files/en-us/web/html/element/selectedcontent/index.md

+
+For example, your `<option>` elements may contain icons, images, or even videos. This content might look nice inside the picker, but could cause the select `<button>` to increase in size, look untidy, and affect the surrounding layout.
+
+This can be fixed by hiding the problem content when it is contained inside `<selectedcontent>`. For example:


"Can" implies this is a good fix. It isn't if you want the icon.

Suggested change

This can be fixed by hiding the problem content when it is contained inside `<selectedcontent>`. For example:

This might be fixed by hiding the problem content when it is contained inside `<selectedcontent>`. For example:

I think "might" feels weird when used like this. I've changed it to "could", to make it a bit less definite, i.e. it is an option, there are other options you could explore.

files/en-us/web/html/element/selectedcontent/index.md

hamishwillee · 2025-03-25T02:05:34Z

files/en-us/web/html/element/selectedcontent/index.md

+
+{{HTMLSidebar}}
+
+The **`<selectedcontent>`** [HTML](/en-US/docs/Web/HTML) element contains a clone of a {{htmlelement("select")}} element's currently-selected {{htmlelement("option")}} element content, created using {{domxref("Node.cloneNode", "cloneNode()")}} under the hood. `<selectedcontent>` represents the content visible inside the closed `<select>` element, otherwise known as the **select {{htmlelement("button")}}** as it is the button you need to press to open the drop-down picker.


Consider saying what it achieves first - i.e. starting with

The <selectedcontent> HTML element can be used to display the content of the currently selected option in the button for a closed <select> list.

OK, I've changed this around quite a bit. The opening paragraph now just reads:

The <selectedcontent> HTML element can be used to display the content of the currently selected <option> inside a closed <select> element.

I moved the other content to the "Description" section.

hamishwillee

@chrisdavidmills I have gone through this, but was exhausted by the end, so might have got sloppy. There's a lot here - looks good.

One thing that I don't think was covered is the stuff in the explainer around default aria stuff. Might not be needed, but worth a quick re-read to see if there is something to be said.

The ::checkmark pseudo-element has its contents populated via the content property. The value of the content property can have an additional argument provided to set the accessible name, which we currently set to an empty string by default to hide it from the a11y tree. The value isn't important because I think the checked state of the option element is already provided in a different way, and announcing a checkmark icon is not helpful. Based on this discussion, we should do this by default for the ::checkmark pseudo without requiring the author to also set the accessible name to the empty string: mdn/content#38470 (comment) Fixed: 405946933 Change-Id: I983b1e7dff879f2c1a2184c505046d0581f93380 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6388535 Reviewed-by: Aaron Leventhal <aleventhal@chromium.org> Commit-Queue: Aaron Leventhal <aleventhal@chromium.org> Cr-Commit-Position: refs/heads/main@{#1437677}

Document customizable <select> elements

4e4b77c

chrisdavidmills requested a review from a team as a code owner March 5, 2025 18:09

chrisdavidmills requested review from hamishwillee and removed request for a team March 5, 2025 18:09

chrisdavidmills marked this pull request as draft March 5, 2025 18:09

github-actions bot added Content:Learn Learning area docs size/m [PR only] 51-500 LoC changed labels Mar 5, 2025

chrisdavidmills added 5 commits March 5, 2025 18:12

fix typo

db40b51

Finish guide

e55d318

Merge branch 'main' into customizable-select

fd5ecff

correct info about how <selectedcontent> is populated

029cb9d

add links to customizable select guide, update existing pages, remove…

80b9f67

… unneeded links

github-actions bot added Content:HTML Hypertext Markup Language docs size/l [PR only] 501-1000 LoC changed and removed size/m [PR only] 51-500 LoC changed labels Mar 7, 2025

Document selectedcontent element

9998430

github-actions bot added the Content:WebAPI Web API docs label Mar 7, 2025

Add doc for ::picker()

4dc3040

github-actions bot added the Content:CSS Cascading Style Sheets docs label Mar 10, 2025

chrisdavidmills added 4 commits March 10, 2025 11:06

Document appearance: base-select, tweak :open and :checked ref pages

edbc2b1

Document the ::picker-icon and ::checkmark pseudos

afdbacb

Add notes on implicit popover-invoker relationship and anchor reference

28e9f6e

Merge branch 'main' into customizable-select

c33195c

chrisdavidmills marked this pull request as ready for review March 10, 2025 13:18

chrisdavidmills requested review from a team as code owners March 10, 2025 13:18

chrisdavidmills requested review from dipikabh and removed request for a team March 10, 2025 13:18

hamishwillee reviewed Mar 25, 2025

View reviewed changes

files/en-us/web/html/element/selectedcontent/index.md Show resolved Hide resolved

hamishwillee reviewed Mar 25, 2025

View reviewed changes

Fixes for hamishwillee review comments

10bfb9c

chrisdavidmills requested a review from hamishwillee March 25, 2025 12:37

chromium-wpt-export-bot mentioned this pull request Mar 25, 2025

Don't make a11y mappings for ::checkmark web-platform-tests/wpt#51585

Merged

Change other elements back to other content

c230327

	[Associating any kind of popover with its invoker](#other_ways_to_set_up_a_popover-invoker_relationship) creates an implicit anchor reference between the two. This causes the invoker to become the popover's anchor element, meaning that you can position the popover relative to it via [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning).
	[Associating any kind of popover with its invoker](#other_ways_to_set_up_a_popover-invoker_relationship) creates an implicit anchor reference between the two. This causes the invoker to become the popover's anchor element, meaning that you can position the popover relative to it using [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning).


		{{CSSRef}}

		The `::checkmark` [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) targets the checkmark placed inside the currently-selected {{htmlelement("option")}} element of a [customizable select element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) to provide a visual indication of which one is selected.


		> [!NOTE]
		> The `::checkmark` pseudo-element is not included in the accessibility tree, so any generated {{cssxref("content")}} set on it will not be announced by assistive technologies. You should still make sure that any new icon you set visually makes sense for its intended purpose.


		## Description

		The `::checkmark` pseudo-element targets the checkmark placed inside a [customizable select element's](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) currently-selected `<option>`.


		The `::checkmark` pseudo-element targets the checkmark placed inside a [customizable select element's](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) currently-selected `<option>`.

		It is only available to target when the originating element has a picker and has base appearance set on it via the {{cssxref("appearance")}} property `base-select` value. Its generated box appears before any boxes generated by the {{cssxref("::before")}} pseudo-element, with the icon specified in default browser stylesheet; you can customize it using the {{cssxref("content")}} property.


		Assuming [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) is being used to lay out the `<option>` elements (which it is by default in customizable selects), you could then move the checkmark from the start of the row to the end by setting an {{cssxref("order")}} value on it greater than `0`, and aligning it to the end of the row using an `auto` {{cssxref("margin-left")}} value (see [Alignment and auto margins](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox#alignment_and_auto_margins)).

		The value of the {{cssxref("content")}} property could also be set to a different emoji, to set a different icon to display.


		{{CSSRef}}

		The `::picker-icon` [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) targets the picker icon inside form controls that have an icon associated with them. In the case of a [customizable select element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select), it selects the down-facing arrow on the inline-end side of the `<select>` element.


		{{CSSRef}}

		The `::picker()` [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents the picker part of an element, for example the drop-down picker of a [customizable select element](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select).


		## Description

		The `::picker()` pseudo-element targets the picker part of a form control, that is, the pop-up part that appears to allow you to make a selection when you press the control button. It is only available to target when the originating element has a picker and has base appearance set on it via the {{cssxref("appearance")}} property `base-select` value.

	The `::picker()` pseudo-element targets the picker part of a form control, that is, the pop-up part that appears to allow you to make a selection when you press the control button. It is only available to target when the originating element has a picker and has base appearance set on it via the {{cssxref("appearance")}} property `base-select` value.
	The `::picker()` pseudo-element selects the picker part of a form control, that is, the pop-up part that appears to allow you to make a selection when you press the control button. It is only available to target when the originating element has a picker and has base appearance set on it via the {{cssxref("appearance")}} property `base-select` value.


		### Basic custom select usage

		To opt-in to customizable select functionality, the `<select>` element and its picker both need to have an {{cssxref("appearance")}} value of `base-select` set on them:

	Styling `<option>` elements has historically been highly limited, hence features being introduced to enable their full customization, just like any regular DOM element. See [Customizable select elements](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) for more details.
	Styling `<option>` elements has historically been highly limited. [Customizable select elements](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) explains newer features that enable their full customization, just like any regular DOM element.


		For example, your `<option>` elements may contain icons, images, or even videos. This content might look nice inside the picker, but could cause the select `<button>` to increase in size, look untidy, and affect the surrounding layout.

		This can be fixed by hiding the problem content when it is contained inside `<selectedcontent>`. For example:

	This can be fixed by hiding the problem content when it is contained inside `<selectedcontent>`. For example:
	This might be fixed by hiding the problem content when it is contained inside `<selectedcontent>`. For example:


		{{HTMLSidebar}}

		The `<selectedcontent>` [HTML](/en-US/docs/Web/HTML) element contains a clone of a {{htmlelement("select")}} element's currently-selected {{htmlelement("option")}} element content, created using {{domxref("Node.cloneNode", "cloneNode()")}} under the hood. `<selectedcontent>` represents the content visible inside the closed `<select>` element, otherwise known as the select {{htmlelement("button")}} as it is the button you need to press to open the drop-down picker.

Editorial review: Document customizable <select> elements #38470

Are you sure you want to change the base?

Editorial review: Document customizable <select> elements #38470

Conversation

chrisdavidmills commented Mar 5, 2025 • edited Loading

Description

Motivation

Additional details

Related issues and pull requests

github-actions bot commented Mar 5, 2025 • edited Loading

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

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

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

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

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

hamishwillee left a comment

Choose a reason for hiding this comment

chrisdavidmills commented Mar 5, 2025 •

edited

Loading

github-actions bot commented Mar 5, 2025 •

edited

Loading