MouseEvent interfaceMouseEvent interface's relatedTarget attributeMouseEvent interface's button attributeMouseEventInit dictionary typeFocusEvent interfaceThe following features are defined in CSS Forms: + CSSFORMS
+ +The following features are defined in CSS Grid Layout: CSSGRID
If the multiple attribute is absent, and the element
- is not disabled, then the user agent should allow the
- user to pick an option element in its list
- of options that is itself not disabled. Upon
- this option element being picked (either
- through a click, or through unfocusing the element after changing its value, or through a menu command, or through any other mechanism), and before the
- relevant user interaction event is queued (e.g. before the
- click event), the user agent must set the selectedness of the picked option element
- to true, set its dirtiness to true, and then
- send select update notifications.
The user agent should allow the user to pick an
+ option element from a select element in its list of options (either through a click, or through
+ unfocusing the element after changing its value, or through a menu
+ command, or through any other mechanism) by running the pick an option
+ algorithm given the select element, the option element, and if
+ select and its select popover are both being rendered with base
+ appearance, a corresponding keydown or mouseup event, otherwise null.
To pick an option given a select element select, an
+ option element option, and an Event or null
+ event:
If select has the multiple attribute
+ or select is disabled, then return.
If event is not null and event's canceled flag is set, + then return.
If event is a MouseEvent and event's button attribute is not 1, then return.
Set option's selectedness to + true.
Set option's dirtiness to + true.
Send select update notifications given
+ select.
If select is being rendered as a drop-down box with base + appearance, then run the hide popover algorithm given select's + select popover.
If the multiple attribute is absent, whenever an
option element in the select element's HTMLSelectElement : HTMLElement {
options asks for a reset, then run that
select element's selectedness setting algorithm.
If the select is being rendered as a drop-down box with base
+ appearance, then the user agent should allow the user to open the picker given a corresponding select
+ element select and a corresponding mousedown or
+ keydown event event:
+
+
If event's canceled flag is set, then return.
If event's button attribute is not
+ 1, then return.
Run the show popover algorithm given select's select + popover, false, and select.
If the select is being rendered as a drop-down box with base
+ appearance, then the user agent should allow the user to focus another option
+ given the new option element to focus option and a keydown event event:
If event's canceled flag is set, then return.
Run the focusing steps on newOption.
Implementations commonly allow the user to focus the next or previous option via + the arrow-up and arrow-down keys, focus the first or last option via the Home or End keys, or + focus the first or last option in the viewport of the picker via the PageUp or PageDown keys.
+ +Which particular keys of the keyboard cause these actions might differ across + implementations and platforms. The ARIA Authoring Practices Guide has good recommendations for + this behavior here.
+If the Run clone selected Fire an event named multiple attribute is present, and the
element is not disabled, then the user agent should
allow the user to toggle the HTMLSelectElement : HTMLElement {
select element's user validity to true.option into select button given
+ the select element.input at the select element, with the bubbles and composed
@@ -54940,6 +55019,24 @@ interface HTMLOptionElement : HTMLElement {
To clone selected option into select button, given a
+ select element select:
Let option be the first element of select's option list whose selectedness is set to true, if such an element + exists; otherwise null.
Let text be the empty string.
If option is not null, then set text to option's label.
Set select's select fallback button text to + text.
option.selectedoptgroup element children
providing headers for groups of options where applicable.
+ select elements which render as a drop-down box support a base
+ appearance in addition to native appearance and primitive
+ appearance.
The select element's select popover supports a base
+ appearance and a native appearance. The select popover can only
+ be rendered with base appearance if its associated select is being
+ rendered with base appearance.
When a select is being rendered as a drop-down box with base
+ appearance, it is expected to render with a shadow tree that contains the
+ following elements:
A select button slot, which is a slot element. It is appended to
+ the select's shadow root as the first child. It is expected to take the
+ first child element of the select if the first child element is a
+ button, otherwise the select fallback button text.
A select fallback button text, which is a div element. It is
+ appended to the select button slot.
A select popover, which is a div element. It is appended to the
+ select's shadow root as the second child, after the select button
+ slot. The select element's picker pseudo-element is the
+ select popover.
A select popover slot, which is a slot element. It is appended to
+ the select popover. It is expected to take all child nodes of the
+ select except for the first child button, which is taken by the
+ select button slot.
Since base appearance is determined by computing style, it isn't
+ possible to swap this DOM structure when switching appearance. Implementations can always include
+ the DOM structure for base appearance when the select is rendered as a
+ drop-down box and then choose to include or exclude it from the layout tree in order
+ to control whether it gets rendered or not.
The select popover is only rendered when it is opted in to base
+ appearance separately from the select element. Otherwise, a native picker is
+ used.
The select popover's implicit anchor element is its associated
+ select element.
When a select element is being rendered with native appearance or
+ primitive appearance, the picker pseudo-element and the
+ picker-icon pseudo-element do not apply.
The picker pseudo-element is not rendered when it has native + appearance or primitive appearance.
+ +The checkmark pseudo-element only applies to option elements which
+ are inside a select element with base appearance whose picker
+ pseudo-element has base appearance.
An optgroup element is expected to be rendered by displaying the element's label attribute.
An option element is expected to be rendered by displaying the element's label, indented under its optgroup element if it
- has one.
option is in a select which is being rendered as a
+ drop-down box with base appearance, and the select's
+ select popover is being rendered with base appearance, and the
+ option's label attribute is not set, then the
+ option is expected to render all of its children rather than by displaying its label.
Each sequence of one or more child hr element siblings may be rendered as a single
separator.