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 the

<span><code>select</code>'s <code>option</code>s are being rendered with base appearance</span>, a

<span data-x="select's options are being rendered with base appearance"><code>select</code>'s

contents 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>

<p>The <span>'::checkmark'</span> pseudo-element only applies to <code>option</code> elements

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>optgroup</code> element has an internal <span>shadow tree</span> with at least one

<code>slot</code> element.</p>

<p>An <code>optgroup</code> element is <dfn data-x="optgroup-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> whose <span data-x="select's options are being rendered with

base appearance">contents are being rendered with base appearance</span>.</p>

<p>If an <code>optgroup</code> element is not being <span

data-x="optgroup-base-appearance">rendered with base appearance</span>, then it is

<span>expected</span> to be rendered by displaying the element's <span

data-x="concept-optgroup-label">label</span> and children.</p>

<p>If an <code>optgroup</code> element is being <span data-x="optgroup-base-appearance">rendered

with base appearance</span>, then it is <span>expected</span> to render with a <span>shadow

tree</span> that contains the following elements:</p>

<ol>

<li><p>An <dfn>optgroup legend slot</dfn>, which is a <code>slot</code> element. It is appended

to the <code>optgroup</code>'s <span>shadow root</span> as the first child. It is

<span>expected</span> to take the first child element of the <code>optgroup</code> if the first

child element is a <code>legend</code> element.</p></li>

<li><p>An <dfn>optgroup label element</dfn>, which is a <code>div</code> element. It is appended

to the <span>optgroup legend slot</span>. It is <span>expected</span> to contain a

<code>Text</code> node whose <span data-x="concept-cd-data">data</span> is the value of the

<code>optgroup</code>'s <code data-x="attr-optgroup-label">label</code> attribute, or the empty

string if the attribute is not present.</p></li>

<li><p>An <dfn>optgroup contents slot</dfn>, which is a <code>slot</code> element. It is appended

to the <code>optgroup</code>'s <span>shadow root</span> after the <span>optgroup legend

slot</span>. It is <span>expected</span> to take all remaining child nodes of the

<code>optgroup</code> element.</p></li>

</ol>

<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>

<p>To determine if a <dfn data-x="select's options are being rendered with base

appearance"><code>select</code>'s contents 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

</ol>

</div>

<p>An <code>option</code> element has an internal <span>shadow tree</span> with a

<code>slot</code> element.</p>

<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>

ancestor <code>select</code></span> and the <span data-x="select's options are being rendered

with base appearance"><code>select</code>'s contents are being rendered with base

appearance</span>.</p>

<p>If an <code>option</code> does not have a <span data-x="option element nearest ancestor

select">nearest ancestor <code>select</code></span>, then it is <span>expected</span> to render

its children.</p>

<p>Otherwise, if an <code>option</code> element is not being <span

data-x="option-base-appearance">rendered with base appearance</span>, then it is

<span>expected</span> to be rendered by displaying the result of <span>collect option text</span>

given the <code>option</code> and true.</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>Otherwise, it is <span>expected</span> to render with a <span>shadow tree</span>

that contains the following elements:</p>

<ol>

<li>

<p>An <dfn>option contents slot</dfn>, which is a <code>slot</code> element. It is appended to

the <code>option</code>'s <span>shadow root</span> as the first child.

If the <code>option</code> element has a <code data-x="attr-option-label">label</code>

attribute whose value is not the empty string, then the <span>option contents slot</span> is

<span>expected</span> to not take any nodes. Otherwise, it is <span>expected</span> to take all

child nodes of the <code>option</code> element.</p>

<p class="note">When the <span>option contents slot</span> does not take any elements, the

<span>option label element</span> is rendered as fallback content.</p>

</li>

<li><p>An <dfn>option label element</dfn>, which is a <code>span</code> element. It is appended

to the <span>option contents slot</span>. It is <span>expected</span> to contain a

<code>Text</code> node whose <span data-x="concept-cd-data">data</span> is the value of the

<code>option</code>'s <code data-x="attr-option-label">label</code> attribute.</p></li>

</ol>

<p>Each sequence of one or more child <code>hr</code> element siblings may be rendered as a single

separator.</p>

</div>

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

option {

display: block;

}

optgroup {

display: block;

font-weight: bolder;

}</code></pre>

<p>The following styles are <span>expected</span> to apply to <code>select</code> elements when

they are being rendered with <span>native appearance</span> or <span>primitive

appearance</span>:</p>

block-size: calc(max(24px, 1lh) * attr(size type(&lt;integer>), 4));

}</code></pre>

<p>The following styles are <span>expected</span> to apply to the <span>optgroup label

element</span>:</p>

<ul>

<li><p><code data-x="" class="css">padding-inline: 0.5em</code></p></li>

<li><p><code data-x="" class="css">min-block-size: 1lh</code></p></li>

</ul>

<div w-nodev>

<h4>The <code>textarea</code> element</h4>