Skip to content

Define base appearance for list box select elements #11758

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+115 −57
Open

Define base appearance for list box select elements #11758

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
57d8220
Define base appearance for list box select elements
josepharhar Jul 21, 2025
e7675c2
consolidate styles
josepharhar Oct 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
172 changes: 115 additions & 57 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56031,8 +56031,8 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
options</span> (either through a click, or through unfocusing the element after changing its
value, or through a <span data-x="option-command">menu command</span>, or through any other
mechanism) by running the <span data-x="concept-select-pick">pick an option</span> algorithm given
the <code>select</code> element, the <code>option</code> element, and if <code>select</code> and
its <span>select popover</span> are both being rendered with <span>base appearance</span>, a
the <code>select</code> element, the <code>option</code> element, and if the
<span><code>select</code>'s <code>option</code>s are being rendered with base appearance</span>, a
corresponding <code data-x="event-keydown">keydown</code> or <code
data-x="event-mouseup">mouseup</code> event, otherwise null.</p>
</div>
Expand Down Expand Up @@ -56112,10 +56112,10 @@ interface <dfn interface>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
</div>

<div algorithm>
<p>If the <code>select</code> is being rendered as a <span>drop-down box</span> with <span>base
appearance</span>, then the user agent should allow the user to <dfn>focus another option</dfn>
given the new <code>option</code> element to focus <var>option</var> and a <code
data-x="event-keydown">keydown</code> event <var>event</var>:</p>
<p>If the <code>select</code> is being rendered with <span>base appearance</span>, then the user
agent should allow the user to <dfn>focus another option</dfn> given the new <code>option</code>
element to focus <var>option</var> and a <code data-x="event-keydown">keydown</code> event
<var>event</var>:</p>

<ol>
<li><p>If <var>event</var>'s <span>canceled flag</span> is set, then return.</p></li>
Expand Down Expand Up @@ -147699,6 +147699,11 @@ progress { appearance: auto; }</code></pre>
appearance</span> in addition to <span>native appearance</span> and <span>primitive
appearance</span>.</p>

<p><code>select</code> elements which render as a <span>drop-down box</span> without the <code
data-x="attr-select-multiple">multiple</code> attribute or as a <span>list box</span> support a
<span>base appearance</span> in addition to <span>native appearance</span> and <span>primitive
appearance</span>.</p>

<p>The <code>select</code> element's <span>select popover</span> supports a <span>base
appearance</span> and a <span>native appearance</span>. The <span>select popover</span> can only
be rendered with <span>base appearance</span> if its associated <code>select</code> is being
Expand Down Expand Up @@ -147741,32 +147746,59 @@ progress { appearance: auto; }</code></pre>
appearance</span> separately from the <code>select</code> element. Otherwise, a native picker is
used.</p>

<p>When a <code>select</code> is being rendered as a <span>list box</span> with <span>base
appearance</span>, it is expected to render with a <span>shadow tree</span> that contains a
<dfn>select list box slot</dfn>, which is a <code>slot</code> element. The <span>select list box
slot</span> is appended to the <code>select</code>'s <span>shadow root</span> as the first child.
The <span>select list box slot</span> is expected to take all children of the <code>select</code>
element.</p>

<p>The <span>select popover</span>'s <span>implicit anchor element</span> is its associated
<code>select</code> element.</p>

<p>When a <code>select</code> element is being rendered with <span>native appearance</span> or
<span>primitive appearance</span>, the <span>'::picker'</span> pseudo-element and the
<span>primitive appearance</span>, or the <code>select</code> element is being rendered as a
<span>list box</span>, the <span>'::picker'</span> pseudo-element and the
<span>'::picker-icon'</span> pseudo-element do not apply.</p>

<p>The <span>'::picker'</span> pseudo-element is not rendered when it has <span>native
appearance</span> or <span>primitive appearance</span>.</p>

<p>The <span>'::checkmark'</span> pseudo-element only applies to <code>option</code> elements
which are inside a <code>select</code> element with <span>base appearance</span> whose
<span>'::picker'</span> pseudo-element has <span>base appearance</span>.</p>
which are <span data-x="option-base-appearance">being rendered with base appearance</span>.</p>

<p>An <code>optgroup</code> element is <span>expected</span> to be rendered by displaying the
element's <code data-x="attr-optgroup-label">label</code> attribute.</p>

<p>An <code>option</code> element is <span>expected</span> to be rendered by displaying the
result of <span>collect option text</span> given the <code>option</code> and true, indented under
its <code>optgroup</code> element if it has one. If the <code>option</code> is in a
<code>select</code> which is being rendered as a <span>drop-down box</span> with <span>base
appearance</span>, and the <code>select</code>'s <span>select popover</span> is being rendered
with <span>base appearance</span>, and the <code>option</code>'s <code
data-x="attr-option-label">label</code> attribute is not set, then the <code>option</code> is
<span>expected</span> to render all of its children rather than by displaying its <span
data-x="concept-option-label">label</span>.</p>
<div algorithm>
<p>To determine if a <dfn><code>select</code>'s <code>option</code>s are being rendered with base
appearance</dfn>, given a <code>select</code> element <var>select</var>:</p>

<ol>
<li><p>If <var>select</var> is being rendered as a <span>list box</span> with <span>base
appearance</span>, then return true.</p></li>

<li><p>If <var>select</var> is being rendered as a <span>drop-down box</span> with <span>base
appearance</span>, and its <span>select popover</span> is being rendered with <span>base
appearance</span>, and <var>select</var> does not have the <code
data-x="attr-select-multiple">multiple</code> attribute set, then return true.</p></li>

<li><p>Return false.</p></li>
</ol>
</div>

<p>An <code>option</code> element is <dfn data-x="option-base-appearance">rendered with base
appearance</dfn> if it has a <span data-x="option element nearest ancestor select">nearest
ancestor <code>select</code></span> and the <span><code>select</code>'s <code>option</code>s are
being rendered with base appearance</span>.</p>

<p>An <code>option</code> element is <span>expected</span> to be rendered by displaying the result
of <span>collect option text</span> given the <code>option</code> and true, indented under its
<code>optgroup</code> element if it has one. If the <code>option</code> <span
data-x="option-base-appearance">is being rendered with base appearance</span> and the
<code>option</code>'s <code data-x="attr-option-label">label</code> attribute is not set, then the
<code>option</code> is <span>expected</span> to render all of its children rather than by
displaying its <span data-x="concept-option-label">label</span>.</p>

<p>Each sequence of one or more child <code>hr</code> element siblings may be rendered as a single
separator.</p>
Expand Down Expand Up @@ -147796,8 +147828,8 @@ progress { appearance: auto; }</code></pre>

</div>

<p>The following styles are <span>expected</span> to apply to <code>select</code> elements when
they are being rendered as a <span>drop-down box</span> with <span>base appearance</span>:</p>
<p>The following styles are expected to apply to <code>select</code> elements when they are being
rendered with <span>base appearance</span>:</p>

<pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";

Expand All @@ -147807,15 +147839,64 @@ select {
text-indent: initial;
background-color: transparent;
border: 1px solid currentColor;
user-select: none;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this make sense for listbox styles? (I think probably yes but just worth checking)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since user-select:none currently applies to the listbox inside the picker for drop-down customizable select, I think we should have it be the same here. Context: #10876

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;
}</code></pre>

<p>The following styles are <span>expected</span> to apply to <code>select</code> elements when
they are being rendered as a <span>drop-down box</span> with <span>base appearance</span>:</p>

<pre><code class="css">@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;
}

Expand All @@ -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);
}

Expand All @@ -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;
}
}</code></pre>

select optgroup {
font-weight: bolder;
}
<p>The following styles are <span>expected</span> to apply to <code>select</code> elements when
they are being rendered as a <span>list box</span> with <span>base appearance</span>:</p>

select optgroup option {
font-weight: normal;
}
<pre><code class="css">@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(&lt;integer>), 4));
}</code></pre>

<div w-nodev>
Expand Down