select element, the option element, and if select and
- its select popover are both being rendered with base appearance, a
+ the select element, the option element, and if the
+ select's options are being rendered with base appearance, a
corresponding keydown or mouseup event, otherwise null.
@@ -56112,10 +56112,10 @@ interface HTMLSelectElement : HTMLElement {
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 the select is being rendered 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.
select elements which render as a drop-down box without the multiple attribute or as a list 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
@@ -147741,32 +147746,59 @@ progress { appearance: auto; }
appearance separately from the select element. Otherwise, a native picker is
used.
When a select is being rendered as a list box with base
+ appearance, it is expected to render with a shadow tree that contains a
+ select list box slot, which is a slot element. The select list box
+ slot is appended to the select's shadow root as the first child.
+ The select list box slot is expected to take all children of the select
+ element.
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
+ primitive appearance, or the select element is being rendered as a
+ list box, 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
- result of collect option text given the option and true, indented under
- its optgroup element if it has one. If the 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.
To determine if a select's options are being rendered with base
+ appearance, given a select element select:
If select is being rendered as a list box with base + appearance, then return true.
If select is being rendered as a drop-down box with base
+ appearance, and its select popover is being rendered with base
+ appearance, and select does not have the multiple attribute set, then return true.
Return false.
An option element is rendered with base
+ appearance if it has a nearest
+ ancestor select and the select's options are
+ being rendered with base appearance.
An option element is expected to be rendered by displaying the result
+ of collect option text given the option and true, indented under its
+ optgroup element if it has one. If the option 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.
The following styles are expected to apply to select elements when
- they are being rendered as a drop-down box with base appearance:
The following styles are expected to apply to select elements when they are being
+ rendered with base appearance:
@namespace "http://www.w3.org/1999/xhtml";
@@ -147807,15 +147839,64 @@ select {
text-indent: initial;
background-color: transparent;
border: 1px solid currentColor;
+ user-select: none;
+ box-sizing: border-box;
+}
+
+select option:enabled:hover {
+ background-color: color-mix(in lab, currentColor 10%, transparent);
+}
+select option:enabled:active {
+ background-color: color-mix(in lab, currentColor 20%, transparent);
+}
+select option:disabled {
+ color: color-mix(in lab, currentColor 50%, transparent);
+}
+
+select option {
+ min-inline-size: 24px;
+ min-block-size: max(24px, 1lh);
+ padding-inline: 0.5em;
+ padding-block-end: 0;
+ display: flex;
+ align-items: center;
+ gap: 0.5em;
+ white-space: nowrap;
+}
+
+select option::checkmark {
+ content: '\2713' / '';
+}
+select option:not(:checked)::checkmark {
+ visibility: hidden;
+}
+
+select optgroup {
+ font-weight: bolder;
+}
+
+select optgroup option {
+ font-weight: normal;
+}
+
+select optgroup legend {
+ padding-inline: 0.5em;
+ min-block-size: 1lh;
+}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 {
+ border-radius: 0.5em;
padding-block: 0.25em;
padding-inline: 0.5em;
min-block-size: calc-size(auto, max(size, 24px, 1lh));
min-inline-size: calc-size(auto, max(size, 24px));
display: inline-flex;
gap: 0.5em;
- border-radius: 0.5em;
- user-select: none;
- box-sizing: border-box;
field-sizing: content !important;
}
@@ -147824,16 +147905,13 @@ select > button:first-child {
display: contents;
}
-select:enabled:hover,
-select option:enabled:hover {
+select:enabled:hover {
background-color: color-mix(in lab, currentColor 10%, transparent);
}
-select:enabled:active,
-select option:enabled:active {
+select::enabled:active {
background-color: color-mix(in lab, currentColor 20%, transparent);
}
-select:disabled,
-select option:disabled {
+select:disabled {
color: color-mix(in lab, currentColor 50%, transparent);
}
@@ -147856,41 +147934,21 @@ select option:disabled {
block-start span-inline-start;
}
-select option {
- min-inline-size: 24px;
- min-block-size: max(24px, 1lh);
- padding-inline: 0.5em;
- padding-block-end: 0;
- display: flex;
- align-items: center;
- gap: 0.5em;
- white-space: nowrap;
-}
-
-select option::checkmark {
- content: '\2713' / '';
-}
-select option:not(:checked)::checkmark {
- visibility: hidden;
-}
-
select::picker-icon {
content: counter(fake-counter-name, disclosure-open);
display: block;
margin-inline-start: auto;
-}
+}The following styles are expected to apply to select elements when
+ they are being rendered as a list box with base appearance:
@namespace "http://www.w3.org/1999/xhtml";
-select optgroup legend {
- padding-inline: 0.5em;
- min-block-size: 1lh;
+select {
+ overflow: auto;
+ display: inline-block;
+ block-size: calc(max(24px, 1lh) * attr(size type(<integer>), 4));
}