The post-connection steps for the HTML + Standard, given insertedNode, are defined as the following:
+ +For each descendant of insertedNode's inclusive descendants in tree order:
+ +If descendant is a selectedoption element, then run the
+ selectedoption insertion steps given descendant and
+ insertedNode's parent.
The removing steps for the HTML Standard, given removedNode and oldParent, are defined as the following:
@@ -1838,6 +1854,20 @@ a.setAttribute('href', 'https://example.com/'); // change the content attributeIf removedNode's popover attribute is not in
the no popover state, then run the hide
popover algorithm given removedNode, false, false, and false.
For each descendant of removedNode's inclusive descendants in tree order:
+ +If descendant is an option element, then run the option
+ removal steps given descendant and oldParent.
If descendant is a selectedoption element, then run the
+ selectedoption removal steps given descendant and
+ oldParent.
A The following terms are defined in CSS Anchor Positioning: CSSANCHOR Select element inner content elements are The following are select element inner content elements: If element's node document is not fully active, then
return. If element's parent is a If element has a form owner then switch on element's The list of options for a To get the list of options given a
+ Let options be « ». For each node of select's
+ descendants in tree order except the descendants
+ which are If node is an Return options. Every To get the select target selectedoption elements, given a Let selectedoptions be select's select descendant
+ selectedoption elements. Append the value of select's Return selectedoptions. The id attribute
setAttribute() methodtextContent attributereplaceChildren() method
+
@@ -12785,6 +12826,34 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
+ Select element inner content elements
+
+ option elements and other
+ elements which are used to group and decorate them with a select element.
+
+
+
option elements.optgroup elements.hr elements.noscript elements.div elements.span elements.img elements.svg elements.Transparent content models
@@ -53096,6 +53165,10 @@ interface HTMLButtonElement : HTMLElement {
select element, then
+ show the picker, if applicable given element's parent and
+ return.type attribute's state, then:option, optgroup, hr, and script-supporting elements.button.autocompleteHTMLSelectedOptionElement? selectedOptionElement;
};
HTMLSelectElement.select
- element consists of all the option element children of the select
- element, and all the option element children of all the optgroup element
- children of the select element, in tree order.select element select:
+
+
+ select elements and their subtrees:
+
+ option element, then append node to options.select element has select descendant selectedoption elements,
+ which is a list of selectedoption elements, initially « ».select
+ select:
+
selectedOptionElement, if it is non-null.required
attribute is a boolean attribute. When specified, the user will be required to select
@@ -53350,10 +53459,23 @@ interface HTMLSelectElement : HTMLElement {
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.click event), the user agent must run the following steps given
+ the select select and the picked option
+ option:
Set the selectedness of + option to true.
Set the dirtiness of option to + true.
Send select update notifications.
For each selectedoption in select's select target + selectedoption elements, run clone an option into a selectedoption given + option and selectedoption.
If the If element's If element's display size is 1, and
+ no multiple attribute is absent, whenever an
option element in the select element's HTMLSelectElement : HTMLElement {
of the first multiple attribute is
- absent, and element's display size is 1,
- and no option elements in the element's option elements in the element's list of options have their selectedness set to true, then set the selectedness of the first option
- element in the list of options in
- tree order that is not disabled,
- if any, to true, and return.option element
+ in the list of options in tree
+ order that is not disabled, if any, to true,
+ and return.
If element's If two or more multiple attribute is
- absent, and two or more option elements in element's option elements in element's list of options have their selectedness set to true, then set the selectedness of all but the last option
element with its selectedness set to true in
the list of options in tree order
to false.
The option HTML element insertion
- steps, given insertedNode, are:
Let option be the first option in element's list of options which has its selectedness set to true, or null if there is no such
+ option.
If insertedNode's parent is a select element, or
- insertedNode's parent is an optgroup element whose parent is a
- select element, then run that select element's selectedness
- setting algorithm.
The option HTML element removing
- steps, given removedNode and oldParent, are:
If oldParent is a select element, or oldParent is an
- optgroup element whose parent is a select element, then run that
- select element's selectedness setting algorithm.
The optgroup HTML element removing
- steps, given removedNode and oldParent, are:
If oldParent is a select element and removedNode has an
- option child, then run oldParent's selectedness setting
- algorithm.
For each selectedoption in element's select target + selectedoption elements, run clone an option into a selectedoption given + option and selectedoption.
If an option element in the list of
@@ -53692,14 +53796,27 @@ interface HTMLSelectElement : HTMLElement {
data-x="concept-option-selectedness">selectedness set to true, if any. If there isn't one,
then it must return the empty string.
On setting, the value attribute must set the selectedness of all the option elements
- in the list of options to false, and then the
- first option element in the list of
- options, in tree order, whose value
- is equal to the given new value, if any, must have its selectedness set to true and its dirtiness set to true.
On setting, the value attribute must run the following
+ steps:
Set the selectedness of all the
+ option elements in the list of
+ options to false
Let option be the first option element in the list of options in tree order whose value is equal to the new given value, otherwise
+ null.
If option is not null, then set option's selectedness to true and its dirtiness to true. + +
For each selectedoption in select's select target + selectedoption elements, run clone an option into a selectedoption given + option and selectedoption.
This can result in no element having a selectedness set to true even in the case of the @@ -53819,6 +53936,64 @@ interface HTMLSelectElement : HTMLElement { … +
selectedoptionelement attributeselect elements may have the selectedoptionelement
+ attribute. When specified its value must be the ID of a
+ selectedoption element in the same tree as the select with
+ the selectedoptionelement attribute. The target
+ selectedoption will update its contents to match the currently selected
+ option of the select.
The following code shows how the selectedoptionelement attribute can be used to render
+ a select element's value outside of the select:
<label for="pet-select">Choose a pet:</label>
+<select id="pet-select" selectedoptionelement="summary-value">
+ <option>dog</option>
+ <option>cat</option>
+</select>
+<p>Summary: you chose the <selectedoption id="summary-value"></selectedoption>.<p>The selectedOptionElement IDL attribute must
+ reflect the selectedoptionelement
+ attribute, limited to only known values.
The following attribute change
+ steps given element, localName, oldValue,
+ value, and namespace, are used for select elements:
If namespace is not null, then return.
If localName is not selectedoptionelement, then return.
Let oldSelectedoption be the first selectedoption element in
+ tree order in element's root whose ID is oldValue if one exists, otherwise null.
Let newSelectedoption be the first selectedoption element in
+ tree order in element's root whose ID is value if one exists, otherwise null.
If oldSelectedoption is eequal to newSelectedoption, then + return.
If oldSelectedoption is not null, then run clone an option into a + selectedoption given null and oldSelectedOption.
If newSelectedoption is not null, then run clone an option into a
+ selectedoption given the value of element's selectedOptionElement and
+ newSelectedOption.
datalist elementselect element.select element.option and script-supporting elements.legend elements.disabledselect element.select element.datalist element.optgroup element.optgroup element.label attribute and a value attribute: Nothing.label attribute but no value attribute: Text.label attribute and is not a
- child of a datalist element: Text that is not
- inter-element whitespace.label attribute and is a child
- of a datalist element: Text.label attribute: Text content and zero or more div, span, noscript, img, SVG svg, and script-supporting elements.img is used within an option and there is no other text within the option, then the option won't have an accessible name unless the img also has a non-empty alt attribute.disabledTo get the option element ancestor select given an option
+ option:
For each ancestor of option's ancestors:
+ +If ancestor is a select, then return
+ ancestor.
Return null.
To maybe clone option into select button, given an Element
+ element:
For each ancestor of element's ancestors:
+ +If all of the following conditions are true:
+ +ancestor is an option element;
ancestor has a non-null option element ancestor + select;
ancestor's option element ancestor select is rendered as a + drop-down box;
ancestor's selectedness + is true,
then run clone selected option text into select given ancestor.
+To clone selected option text into select given an option element
+ selectedOption:
Assert: selectedOption's selectedness is true.
Let select be selectedOption's option element ancestor + select.
Assert: select is not null.
Set select's select fallback button text to the value of + selectedOption's label.
For each selectedoption of select's select target + selectedoption elements:
+ +Run clone an option into a selectedoption given option and + selectedoption.
The option HTML element insertion steps, given
+ insertedOption, are:
For each ancestor of option's ancestors:
+ +If ancestor is a select element, then run the selectedness
+ setting algorithm given select and return.
The option HTML element removing steps, given
+ removedOption and oldParent, are:
For each ancestor of oldParent's inclusive ancestors:
+ +If ancestor is a select element, then run the selectedness
+ setting algorithm given select and return.
The activation behavior of an option option is to run the
+ following steps:
Let select be the option element ancestor select given + option.
If select is null, 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:
+ +Run the hide popover algorithm given the first item in select's + select popover slot's assigned nodes.
option.selectedselectedoption elementThe selectedoption element reflects the contents of a select
+ element's currently selected option element. selectedoption elements can
+ be used to declaratively show the selected option element's contents in a different
+ part of the document, such as the select element's invoker button, with alternate
+ rendering based on different selectors in the author's stylesheet.
Every time the selected option of a select switches from one option
+ to another, or the currently selected option's descendant DOM structure mutates, the
+ selectedoption element removes all of its children and replaces them with a new
+ cloned copy of the DOM structure of the select's selected option
+ element.
selectedoption elements become associated with select elements when
+ the selectedoption is a descendant of the select.
To clone an option into a selectedoption, given an option element
+ option and a selectedoption element selectedOption:
Let nodes be « ».
If option is not null, then for each child of option's children:
+ +Let childClone be the result of running clone given child, null, true.
Append childClone to + nodes.
Run replaceChildren on + selectedOption given nodes.
The selectedoption insertion steps, given selectedoption and + insertionPoint, are:
+ +Let firstAncestorSelect be null.
Let ancestor be selectedoption's parent.
While firstAncestorSelect is null and ancestor is not + null:
+ +If ancestor is a select element, then set
+ firstAncestorSelect to ancestor.
Set ancestor to ancestor's parent.
If firstAncestorSelect is null, then return.
Append selectedoption to + firstAncestorSelect's select descendant selectedoption elements.
Run clone an option into a selectedoption given the first option
+ in firstAncestorSelect's list of
+ options whose selectedness is true and
+ insertedNode.
The selectedoption removal steps, given selectedoption and + oldParent, are:
+ +For each ancestor of selectedoption's ancestors:
+ +If ancestor is a select element, then return.
For each ancestor of oldParent's inclusive ancestors:
+ +If ancestor is a select element, then:
remove selectedoption from + ancestor's select descendant selectedoption elements.
Run clone an option into a selectedoption given null and + selectedoption.
Return.
Several of these modes, namely "in head", "in body", "in - table", and "in select", are special, in - that the other modes defer to them at various times. When the algorithm below says that the user - agent is to do something "using the rules for the m insertion - mode", where m is one of these modes, the user agent must use the rules - described under the m insertion mode's section, but must leave - the insertion mode unchanged unless the rules in m themselves - switch the insertion mode to a new value.
+ data-x="insertion mode: in body">in body", and "in + table", are special, in that the other modes defer to them at various times. When the + algorithm below says that the user agent is to do something "using the rules for the + m insertion mode", where m is one of these modes, the user agent must use + the rules described under the m insertion mode's section, but must leave + the insertion mode unchanged unless the rules in m themselves switch the + insertion mode to a new value.When the insertion mode is switched to "text" or "in table text", the original insertion @@ -124402,37 +124814,6 @@ dictionary StorageEventInit : EventInit { parsing algorithm (fragment case), set node to the context element passed to that algorithm.
-If node is a select element, run these substeps:
If last is true, jump to the step below labeled - done.
Let ancestor be node.
Loop: If ancestor is the first node in the stack of - open elements, jump to the step below labeled done.
Let ancestor be the node before ancestor in the - stack of open elements.
If ancestor is a template node, jump to the step below
- labeled done.
If ancestor is a table node, switch the insertion
- mode to "in select in table"
- and return.
Jump back to the step labeled loop.
Done: Switch the insertion mode to "in select" and return.
If node is a td or th element and last is
false, then switch the insertion mode to "in
cell" and return.
thmarqueeobjectselecttemplatemimotemplate in the HTML namespaceThe stack of open elements is said to have a particular element in select scope when it has that element in the specific scope consisting of all element types - except the following:
- -optgroup in the HTML namespaceoption in the HTML namespaceNothing happens if at any time any of the elements in the stack of open elements
are moved to a new location in, or removed from, the Document tree. In particular,
the stack is not changed in this situation. This can cause, amongst other strange effects, content
@@ -129324,6 +129695,24 @@ document.body.appendChild(text);
p element in button scope, then close a p
element.
If the stack of open elements has a
+ select element in scope and has either an option element in scope or an optgroup element in scope, then:
Generate implied end tags except for option and
+ optgroup elements.
If the current node is not now an option or
+ optgroup element, this is a parse error.
While the stack of open elements has
+ an option element in scope or has an
+ optgroup element in scope, pop an element from the stack of open
+ elements.
Insert an HTML element for the token. Immediately pop the current node off the stack of open elements.
@@ -129393,25 +129782,70 @@ document.body.appendChild(text);If the stack of open elements has a
+ select element in scope, then:
Parse error.
Pop elements from the stack of open elements until a select
+ element has been popped from the stack.
Reconstruct the active formatting elements, if any.
Insert an HTML element for the token.
Set the frameset-ok flag to "not ok".
+If the stack of open elements has a
+ select element in scope and has a has
+ an option element in scope, then:
Generate implied end tags except for option elements.
If the insertion mode is one of "in - table", "in caption", "in table body", "in row", or "in cell", then switch the - insertion mode to "in select in - table". Otherwise, switch the insertion mode to "in select".
+If the current node is not now an option element, this is a
+ parse error.
While the stack of open elements has
+ an option element in scope, pop an element from the stack of open
+ elements.
Reconstruct the active formatting elements, if any.
+ +Insert an HTML element for the token.
If the current node is an option element, then pop the
- current node off the stack of open elements.
If the stack of open elements has a
+ select element in scope and has either an option element in scope or an optgroup element in scope, then:
Generate implied end tags except for option and
+ optgroup elements.
If the current node is not now an option or
+ optgroup element, this is a parse error.
Generate implied end tags except for optgroup
+ elements.
If the current node is not now an optgroup element, this is a
+ parse error.
While the stack of open elements has
+ an option element in scope or has an
+ optgroup element in scope, pop an element from the stack of open
+ elements.
Reconstruct the active formatting elements, if any.
@@ -130539,231 +130973,6 @@ document.body.appendChild(text); same time, nor can it have neither when the close the cell algorithm is invoked. -When the user agent is to apply the rules for the "in - select" insertion mode, the user agent must handle the token as follows:
- -Parse error. Ignore the token.
-Insert the token's character.
-Insert a comment.
-Parse error. Ignore the token.
-Process the token using the rules for the "in body" insertion mode.
-If the current node is an option element, pop that node from the
- stack of open elements.
Insert an HTML element for the token.
-If the current node is an option element, pop that node from the
- stack of open elements.
If the current node is an optgroup element, pop that node from the
- stack of open elements.
Insert an HTML element for the token.
-If the current node is an option element, pop that node from the
- stack of open elements.
If the current node is an optgroup element, pop that node from the
- stack of open elements.
Insert an HTML element for the token. Immediately pop the current - node off the stack of open elements.
- -Acknowledge the token's self-closing flag, if it is set.
-First, if the current node is an option element, and the node
- immediately before it in the stack of open elements is an optgroup
- element, then pop the current node from the stack of open
- elements.
If the current node is an optgroup element, then pop that node from
- the stack of open elements. Otherwise, this is a parse error; ignore
- the token.
If the current node is an option element, then pop that node from
- the stack of open elements. Otherwise, this is a parse error; ignore
- the token.
If the stack of open elements does not have a select element in select scope, this is a parse
- error; ignore the token. (fragment case)
Otherwise:
- -Pop elements from the stack of open elements until a select element
- has been popped from the stack.
Reset the insertion mode appropriately.
-Parse error.
- - -If the stack of open elements does not have a select element in select scope, ignore the token.
- (fragment case)
Otherwise:
- -Pop elements from the stack of open elements until a select element
- has been popped from the stack.
Reset the insertion mode appropriately.
- - -It just gets treated like an end tag.
-Parse error.
- - -If the stack of open elements does not have a select element in select scope, ignore the token.
- (fragment case)
Otherwise:
- -Pop elements from the stack of open elements until a select element
- has been popped from the stack.
Reset the insertion mode appropriately.
- - -Reprocess the token.
-Process the token using the rules for the "in head" insertion mode.
-Process the token using the rules for the "in body" insertion mode.
-Parse error. Ignore the token.
-When the user agent is to apply the rules for the "in select in table" insertion mode, the user agent must handle the - token as follows:
- -Parse error.
- - -Pop elements from the stack of open elements until a select element
- has been popped from the stack.
Reset the insertion mode appropriately.
- - -Reprocess the token.
-Parse error.
- -If the stack of open elements does not have an element in table scope that is an HTML - element with the same tag name as that of the token, then ignore the token.
- -Otherwise:
- - -Pop elements from the stack of open elements until a select element
- has been popped from the stack.
Reset the insertion mode appropriately.
- - -Reprocess the token.
-Process the token using the rules for the "in select" insertion mode.
-When the user agent is to apply the rules for the "in
@@ -135678,12 +135887,98 @@ progress { appearance: auto; }
with the element's optgroup 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.
When a select is being rendered as a drop-down box with a base
+ appearance, it is expected to render as if it has the following shadow
+ root:
<slot id="select-button-slot">
+ <div id="select-fallback-button-text"></div>
+</slot>
+<div id="select-popover" popover="auto">
+ <slot id="select-popover-slot"></slot>
+</div>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.
select elements rendered as a drop-down box with base
+ appearance each contain the following elements as shown with ID attributes in the above
+ HTML:
A select button slot, which is a slot.
Select fallback button text, which is a div.
A select popover, which is a div.
A select popover slot, which is a slot.
The implicit anchor element of the select popover element is the
+ select element shadow host of the shadow host in which select popover
+ resides.
The shadow root used for select's drop-down box
+ base appearance must have its slot assignment set to "manual". The shadow root must also have delegates focus
+ set to true if select button slot has an assigned node.
Without delegates focus set to true, the select itself
+ would receive focus instead of the button which is slotted into the select
+ button slot.
select elements rendered as a drop-down box with base
+ appearance must render as if they are using manual slot assignment with the
+ following base select slotting algorithm to assign
+ their child nodes to slots. To perform the base select slotting algorithm, given a
+ select element select:
Let firstButton be null.
Let otherChildren be « ».
For each Node child in
+ select's children:
If child is a button and firstButton is null, then set
+ firstButton to child.
Otherwise, append child to + otherChildren.
Set select's select button slot's manually assigned + nodes to firstButton.
Set select's select popover slot's manually assigned + nodes to otherChildren.
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 being rendered in a select which is being
+ rendered as a drop-down box with base appearance, 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.
The following styles are expected to apply to select elements when they are being
+ rendered as a drop-down box with base appearance:
@namespace "http://www.w3.org/1999/xhtml";
+
+select {
+ background-color: transparent;
+ border: 0px none transparent;
+
+select > datalist,
+select::select-fallback-datalist {
+ box-shadow: 0px 12.8px 28.8px rgba(0, 0, 0, 0.13), 0px 0px 9.2px rgba(0, 0, 0, 0.11);
+ box-sizing: border-box;
+ overflow: auto;
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ border-radius: 0.25em;
+ padding-block: 0.25em;
+ padding-inline: 0;
+ background-color: Field;
+ margin: 0;
+ inset: auto;
+ min-inline-size: anchor-size(self-inline);
+ min-block-size: 1lh;
+ inset-block-start: anchor(self-end);
+ inset-inline-start: anchor(self-start);
+ position-try:
+ -internal-select-datalist-reverse-block,
+ -internal-select-datalist-reverse-inline,
+ -internal-select-datalist-reverse-both,
+ -internal-select-datalist-default-fill,
+ -internal-select-datalist-reverse-block-fill,
+ -internal-select-datalist-reverse-inline-fill,
+ -internal-select-datalist-reverse-both-fill;
+}
+
+/* Fallbacks without vertical scrolling */
+@position-try -internal-select-fallback-datalist-reverse-block {
+ inset: auto;
+ /* Reverse block axis */
+ inset-block-end: anchor(self-start);
+ inset-inline-start: anchor(self-start);
+}
+@position-try -internal-select-fallback-datalist-reverse-inline {
+ inset: auto;
+ /* Reverse inline axis */
+ inset-block-start: anchor(self-end);
+ inset-inline-end: anchor(self-end);
+}
+@position-try -internal-select-fallback-datalist-reverse-both {
+ inset: auto;
+ /* Reverse both axes */
+ inset-block-end: anchor(self-start);
+ inset-inline-end: anchor(self-end);
+}
+
+/* Fallbacks with vertical scrolling */
+@position-try -internal-select-fallback-datalist-default-fill {
+ inset: auto;
+ inset-block-start: anchor(self-end);
+ inset-inline-start: anchor(self-start);
+ block-size: -webkit-fill-available;
+}
+@position-try -internal-select-fallback-datalist-reverse-block-fill {
+ inset: auto;
+ /* Reverse block axis */
+ inset-block-end: anchor(self-start);
+ inset-inline-start: anchor(self-start);
+ block-size: -webkit-fill-available;
+}
+@position-try -internal-select-fallback-datalist-reverse-inline-fill {
+ inset: auto;
+ /* Reverse inline axis */
+ inset-block-start: anchor(self-end);
+ inset-inline-end: anchor(self-end);
+ block-size: -webkit-fill-available;
+}
+@position-try -internal-select-fallback-datalist-reverse-both-fill {
+ inset: auto;
+ /* Reverse both axes */
+ inset-block-end: anchor(self-start);
+ inset-inline-end: anchor(self-end);
+ block-size: -webkit-fill-available;
+}
+
+select > datalist,
+select::select-fallback-datalist {
+ position: fixed;
+ width: fit-content;
+ height: fit-content;
+ color: CanvasText;
+}
+select > datalist:popover-open,
+select::select-fallback-datalist:popover-open {
+ overlay: auto !important;
+ display: block;
+}
+select > datalist:-internal-popover-in-top-layer::backdrop,
+select::select-fallback-datalist:-internal-popover-in-top-layer::backdrop {
+ position: fixed;
+ inset: 0;
+ pointer-events: none !important;
+ background-color: transparent;
+}
+
+select:open > datalist {
+ display: block;
+}
+
+select::select-fallback-button {
+ color: FieldText;
+ background-color: Field;
+ appearance: none;
+ padding: 0.25em;
+ border: 1px solid ButtonBorder;
+ cursor: default;
+ font-size: inherit;
+ text-align: inherit;
+ display: inline-flex;
+ flex-grow: 1;
+ flex-shrink: 1;
+ align-items: center;
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+
+select::select-fallback-button-icon {
+ opacity: 1;
+ outline: none;
+ margin-inline-start: 0.25em;
+ padding-block: 2px;
+ padding-inline: 3px;
+ block-size: 1.0em;
+ inline-size: 1.2em;
+ min-inline-size: 1.2em;
+ max-inline-size: 1.2em;
+ display: block;
+
+ color: light-dark(black, white);
+ stroke: currentColor;
+ stroke-width: 3;
+ stroke-linejoin: round;
+}
+
+select::select-fallback-button-text {
+ color: inherit;
+ min-inline-size: 0px;
+ max-block-size: 100%;
+ flex-grow: 1;
+ flex-shrink: 1;
+ overflow: hidden;
+ display: inline;
+}
+
+select option:not(:disabled):hover {
+ background-color: SelectedItem;
+ color: SelectedItemText;
+}
+
+select option {
+ /* min-size rules ensure that we meet accessibility guidelines for minimum target size.
+ * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
+ min-inline-size: 24px;
+ min-block-size: max(24px, 1.2em);
+ align-content: center;
+}
+
+select option::before {
+ content: '\2713' / '';
+}
+select option:not(:checked)::before {
+ visibility: hidden;
+}