diff options
Diffstat (limited to 'devdocs/html/element%2Fselect.html')
| -rw-r--r-- | devdocs/html/element%2Fselect.html | 548 |
1 files changed, 548 insertions, 0 deletions
diff --git a/devdocs/html/element%2Fselect.html b/devdocs/html/element%2Fselect.html new file mode 100644 index 00000000..5bf0a08e --- /dev/null +++ b/devdocs/html/element%2Fselect.html @@ -0,0 +1,548 @@ +<header><h1><select>: The HTML Select element</h1></header><div class="section-content"><p>The <code><select></code> <a href="../index">HTML</a> element represents a control that provides a menu of options.</p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/select.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>The above example shows typical <code><select></code> usage. It is given an <code>id</code> attribute to enable it to be associated with a <a href="label"><code><label></code></a> for accessibility purposes, as well as a <code>name</code> attribute to represent the name of the associated data point submitted to the server. Each menu option is defined by an <a href="option"><code><option></code></a> element nested inside the <code><select></code>.</p> <p>Each <code><option></code> element should have a <a href="option#value"><code>value</code></a> attribute containing the data value to submit to the server when that option is selected. If no <code>value</code> attribute is included, the value defaults to the text contained inside the element. You can include a <a href="option#selected"><code>selected</code></a> attribute on an <code><option></code> element to make it selected by default when the page first loads.</p> <p>The <code><select></code> element has some unique attributes you can use to control it, such as <code>multiple</code> to specify whether multiple options can be selected, and <code>size</code> to specify how many options should be shown at once. It also accepts most of the general form input attributes such as <code>required</code>, <code>disabled</code>, <code>autofocus</code>, etc.</p> <p>You can further nest <code><option></code> elements inside <a href="optgroup"><code><optgroup></code></a> elements to create separate groups of options inside the dropdown.</p> <p>For further examples, see <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls#drop-down_controls">The native form widgets: Drop-down content</a>.</p> +</div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="autocomplete"><a href="#autocomplete"><code>autocomplete</code></a></dt> <dd> <p>A string providing a hint for a <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent's</a> autocomplete feature. See <a href="../attributes/autocomplete">The HTML autocomplete attribute</a> for a complete list of values and details on how to use autocomplete.</p> </dd> <dt id="autofocus"><a href="#autofocus"><code>autofocus</code></a></dt> <dd> <p>This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form element in a document can have the <code>autofocus</code> attribute.</p> </dd> <dt id="disabled"><a href="#disabled"><code>disabled</code></a></dt> <dd> <p>This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example <a href="fieldset"><code><fieldset></code></a>; if there is no containing element with the <code>disabled</code> attribute set, then the control is enabled.</p> </dd> <dt id="form"><a href="#form"><code>form</code></a></dt> <dd> <p>The <a href="form"><code><form></code></a> element to associate the <code><select></code> with (its <em>form owner</em>). The value of this attribute must be the <a href="../global_attributes#id"><code>id</code></a> of a <code><form></code> in the same document. (If this attribute is not set, the <code><select></code> is associated with its ancestor <code><form></code> element, if any.)</p> <p>This attribute lets you associate <code><select></code> elements to <code><form></code>s anywhere in the document, not just inside a <code><form></code>. It can also override an ancestor <code><form></code> element.</p> </dd> <dt id="multiple"><a href="#multiple"><code>multiple</code></a></dt> <dd> <p>This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time. When <code>multiple</code> is specified, most browsers will show a scrolling list box instead of a single line dropdown.</p> </dd> <dt id="name"><a href="#name"><code>name</code></a></dt> <dd> <p>This attribute is used to specify the name of the control.</p> </dd> <dt id="required"><a href="#required"><code>required</code></a></dt> <dd> <p>A Boolean attribute indicating that an option with a non-empty string value must be selected.</p> </dd> <dt id="size"><a href="#size"><code>size</code></a></dt> <dd> <p>If the control is presented as a scrolling list box (e.g. when <code>multiple</code> is specified), this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select element as a scrolled list box. The default value is <code>0</code>.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> According to the HTML specification, the default value for size should be <code>1</code>; however, in practice, this has been found to break some websites, and no other browser currently does that, so Mozilla has opted to continue to return <code>0</code> for the time being with Firefox.</p> </div> </dd> </dl> +</div> +<h2 id="usage_notes">Usage notes</h2> + +<h3 id="selecting_multiple_options">Selecting multiple options</h3> +<div class="section-content"> +<p>On a desktop computer, there are a number of ways to select multiple options in a <code><select></code> element with a <code>multiple</code> attribute:</p> <p>Mouse users can hold the <kbd>Ctrl</kbd>, <kbd>Command</kbd>, or <kbd>Shift</kbd> keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them.</p> <div class="notecard warning" id="sect2"> <p><strong>Warning:</strong> The mechanism for selecting multiple non-contiguous items via the keyboard described below currently only seems to work in Firefox.</p> <p>On macOS, the <kbd>Ctrl</kbd> + <kbd>Up</kbd> and <kbd>Ctrl</kbd> + <kbd>Down</kbd> shortcuts conflict with the OS default shortcuts for <em>Mission Control</em> and <em>Application windows</em>, so you'll have to turn these off before it will work.</p> </div> <p>Keyboard users can select multiple contiguous items by:</p> <ul> <li> Focusing on the <code><select></code> element (e.g. using <kbd>Tab</kbd> ). </li> <li> Selecting an item at the top or bottom of the range they want to select using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to go up and down the options. </li> <li> Holding down the <kbd>Shift</kbd> key and then using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to increase or decrease the range of items selected. </li> </ul> <p>Keyboard users can select multiple non-contiguous items by:</p> <ul> <li> Focusing on the <code><select></code> element (e.g. using <kbd>Tab</kbd> ). </li> <li> Holding down the <kbd>Ctrl</kbd> key then using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to change the "focused" select option, i.e. the one that will be selected if you choose to do so. The "focused" select option is highlighted with a dotted outline, in the same way as a keyboard-focused link. </li> <li> Pressing <kbd>Space</kbd> to select/deselect "focused" select options. </li> </ul> +</div> +<h2 id="styling_with_css">Styling with CSS</h2> +<div class="section-content"> +<p>The <code><select></code> element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element — for example, manipulating the <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model">box model</a>, the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts">displayed font</a>, etc., and you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance"><code>appearance</code></a> property to remove the default system <code>appearance</code>.</p> <p>However, these properties don't produce a consistent result across browsers, and it is hard to do things like line different types of form element up with one another in a column. The <code><select></code> element's internal structure is complex, and hard to control. If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> to provide semantics.</p> <p>For more useful information on styling <code><select></code>, see:</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">Styling HTML forms</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced styling for HTML forms</a></li> </ul> <p>Also see the "Customizing select styles" example below for an example of you could attempt a simple <code><select></code> styling.</p> +</div> +<h2 id="examples">Examples</h2> + +<h3 id="basic_select">Basic select</h3> +<div class="section-content"> +<p>The following example creates a very simple dropdown menu, the second option of which is selected by default.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="TPyBcla2JefLSgyZXj+GYW50vdXGUi9mYWW55AyUHIE=" data-language="html"><span class="token comment"><!-- The second value will be selected initially --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>choice<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>first<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>First Value<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>second<span class="token punctuation">"</span></span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>Second Value<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>third<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Third Value<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect3"> + +<iframe class="sample-code-frame" title="Basic select sample" id="frame_basic_select" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/select/runner.html?id=basic_select" loading="lazy"></iframe> +</div> +</div> +<h3 id="advanced_select_with_multiple_features">Advanced select with multiple features</h3> +<div class="section-content"> +<p>The follow example is more complex, showing off more features you can use on a <code><select></code> element:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="gS9YJxhQ7MKmQIRBzQ0n705Ob6tGLmMv+QMElR/iMQw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> + Please choose one or more pets: + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pets<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4-legged pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dog<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Dog<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cat<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Cat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hamster<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Hamster<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optgroup</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Flying pets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>parrot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Parrot<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>macaw<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Macaw<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>albatross<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Albatross<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optgroup</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Advanced select with multiple features sample" id="frame_advanced_select_with_multiple_features" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/select/runner.html?id=advanced_select_with_multiple_features" loading="lazy"></iframe> +</div> <p>You'll see that:</p> <ul> <li>Multiple options are selectable because we've included the <code>multiple</code> attribute.</li> <li>The <code>size</code> attribute causes only 4 lines to display at a time; you can scroll to view all the options.</li> <li>We've included <a href="optgroup"><code><optgroup></code></a> elements to divide the options up into different groups. This is a purely visual grouping, its visualization generally consists of the group name being bolded, and the options being indented.</li> <li>The "Hamster" option includes a <code>disabled</code> attribute and therefore can't be selected at all.</li> </ul> +</div> +<h3 id="customizing_select_styles">Customizing select styles</h3> +<div class="section-content"> +<p>This example shows how you could use some CSS and JavaScript to provide extensive custom styling for a <code><select></code> box.</p> <p>This example basically:</p> <ul> <li>Clones the <code><select></code>'s context (the <a href="option"><code><option></code></a> elements) in a parent wrapper and reimplements the standard expected behavior using additional HTML elements and JavaScript. This includes basic tab behavior to provide keyboard accessibility.</li> <li>Maps some standards native <code>attributes</code> to <code>data-attributes</code> of the new elements in order to manage state and CSS.</li> </ul> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> Not all native features are supported, it's a Proof of Concept. IT starts from standard HTML but the same results can be achieved starting from JSON data, custom HTML, or other solutions.</p> </div> <h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="5jQB5n72rOLcUOQfu26qdO6uKEbpK6VIgeR8yH1lLh0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Standard controls<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1A<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>select<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>off<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Carrots<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Peas<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Beans<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Pneumonoultramicroscopicsilicovolcanoconiosis<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Custom controls<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2A<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>select<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>off<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Carrots<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Peas<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Beans<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>Pneumonoultramicroscopicsilicovolcanoconiosis<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="css">CSS</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="hoa421zURWd/2yz5HGpqM2f+AG0g74k/IX/8x8UFo/c=" data-language="css"><span class="token selector">body</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> Cambria<span class="token punctuation">,</span> Cochin<span class="token punctuation">,</span> Georgia<span class="token punctuation">,</span> Times<span class="token punctuation">,</span> <span class="token string">"Times New Roman"</span><span class="token punctuation">,</span> serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">.select:focus</span> <span class="token punctuation">{</span> + <span class="token property">border-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select[data-multiple] div.header</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select div.header</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"↓"</span><span class="token punctuation">;</span> + <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> + <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> + <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> + <span class="token property">border-width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> + <span class="token property">border-style</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> + <span class="token property">border-color</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> + <span class="token property">border-radius</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select div.header::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"↓"</span><span class="token punctuation">;</span> + <span class="token property">align-self</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span> + <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> + <span class="token property">align-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> + <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> + <span class="token property">justify-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> + <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select div.header:hover::after</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">.select .header select</span> <span class="token punctuation">{</span> + <span class="token property">appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">border-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> + <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> + <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">.select .header select optgroup</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">.select select div.option</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select</span> <span class="token punctuation">{</span> + <span class="token property">user-select</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> + <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> + <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> + <span class="token property">border-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span> + <span class="token property">border-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">border-color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> + <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select:focus, +html body form fieldset#custom div.select:hover</span> <span class="token punctuation">{</span> + <span class="token property">border-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select[data-open]</span> <span class="token punctuation">{</span> + <span class="token property">border-bottom-left-radius</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">border-bottom-right-radius</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select[data-open] datalist</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select datalist</span> <span class="token punctuation">{</span> + <span class="token property">appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">border-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span> + <span class="token property">border-width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> + <span class="token property">border-color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span> + <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> + <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> + <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> + <span class="token property">border-bottom-left-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> + <span class="token property">border-bottom-right-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select datalist div.option</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> + <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> + <span class="token property">border-width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select datalist div.option:hover, +html body form fieldset#custom div.select datalist div.option:focus, +html body form fieldset#custom div.select datalist div.option:checked</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html + body + form + fieldset#custom + div.select + div.optgroup + div.option[data-disabled]</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html + body + form + fieldset#custom + div.select + div.optgroup + div.option[data-checked]</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select div.optgroup div.label</span> <span class="token punctuation">{</span> + <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select div.optgroup div.option div.label</span> <span class="token punctuation">{</span> + <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 0.25em<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">html body form fieldset#custom div.select div.header span</span> <span class="token punctuation">{</span> + <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 0.5em<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="javascript">JavaScript</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="VBcwxA5gHMPSr1t4RJ64AxBBQlFeMAOWQ+bTmQDiEZM=" data-language="js"><span class="token keyword">const</span> selects <span class="token operator">=</span> custom<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"select"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> select <span class="token keyword">of</span> selects<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> header <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> datalist <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"datalist"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> optgroups <span class="token operator">=</span> select<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"optgroup"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> span <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"span"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> options <span class="token operator">=</span> select<span class="token punctuation">.</span>options<span class="token punctuation">;</span> + <span class="token keyword">const</span> parent <span class="token operator">=</span> select<span class="token punctuation">.</span>parentElement<span class="token punctuation">;</span> + <span class="token keyword">const</span> multiple <span class="token operator">=</span> select<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"multiple"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">function</span> <span class="token function">onclick</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> disabled <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"data-disabled"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + select<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + span<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>disabled<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>multiple<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>shiftKey<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> checked <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"data-checked"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"data-checked"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"data-checked"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> options <span class="token operator">=</span> div<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">".option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> options<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> option <span class="token operator">=</span> options<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"data-checked"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"data-checked"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + + <span class="token keyword">function</span> <span class="token function">onkeyup</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + e<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>keyCode <span class="token operator">===</span> <span class="token number">13</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + + div<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"select"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + header<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"header"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + div<span class="token punctuation">.</span>tabIndex <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> + select<span class="token punctuation">.</span>tabIndex <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span> + span<span class="token punctuation">.</span>innerText <span class="token operator">=</span> select<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + header<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>span<span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> attribute <span class="token keyword">of</span> select<span class="token punctuation">.</span>attributes<span class="token punctuation">)</span> <span class="token punctuation">{</span> + div<span class="token punctuation">.</span>dataset<span class="token punctuation">[</span>attribute<span class="token punctuation">.</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> attribute<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> options<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> option <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> label <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> o <span class="token operator">=</span> options<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> attribute <span class="token keyword">of</span> o<span class="token punctuation">.</span>attributes<span class="token punctuation">)</span> <span class="token punctuation">{</span> + option<span class="token punctuation">.</span>dataset<span class="token punctuation">[</span>attribute<span class="token punctuation">.</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> attribute<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + option<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + label<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"label"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + label<span class="token punctuation">.</span>innerText <span class="token operator">=</span> o<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>value <span class="token operator">=</span> o<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>label <span class="token operator">=</span> o<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>onclick <span class="token operator">=</span> onclick<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>onkeyup <span class="token operator">=</span> onkeyup<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>tabIndex <span class="token operator">=</span> i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>label<span class="token punctuation">)</span><span class="token punctuation">;</span> + datalist<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + div<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>header<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> o <span class="token keyword">of</span> optgroups<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> optgroup <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> label <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> options <span class="token operator">=</span> o<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>optgroup<span class="token punctuation">,</span> o<span class="token punctuation">)</span><span class="token punctuation">;</span> + optgroup<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"optgroup"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + label<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"label"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + label<span class="token punctuation">.</span>innerText <span class="token operator">=</span> o<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + optgroup<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>label<span class="token punctuation">)</span><span class="token punctuation">;</span> + div<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>optgroup<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> o <span class="token keyword">of</span> options<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> option <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> label <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> attribute <span class="token keyword">of</span> o<span class="token punctuation">.</span>attributes<span class="token punctuation">)</span> <span class="token punctuation">{</span> + option<span class="token punctuation">.</span>dataset<span class="token punctuation">[</span>attribute<span class="token punctuation">.</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> attribute<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + <span class="token punctuation">}</span> + option<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + label<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"label"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + label<span class="token punctuation">.</span>innerText <span class="token operator">=</span> o<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>tabIndex <span class="token operator">=</span> i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>value <span class="token operator">=</span> o<span class="token punctuation">.</span>value<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>label <span class="token operator">=</span> o<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>onclick <span class="token operator">=</span> onclick<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>onkeyup <span class="token operator">=</span> onkeyup<span class="token punctuation">;</span> + option<span class="token punctuation">.</span>tabIndex <span class="token operator">=</span> i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>label<span class="token punctuation">)</span><span class="token punctuation">;</span> + optgroup<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + + div<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + parent<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>div<span class="token punctuation">,</span> select<span class="token punctuation">)</span><span class="token punctuation">;</span> + header<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>select<span class="token punctuation">)</span><span class="token punctuation">;</span> + div<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>datalist<span class="token punctuation">)</span><span class="token punctuation">;</span> + datalist<span class="token punctuation">.</span>style<span class="token punctuation">.</span>top <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>header<span class="token punctuation">.</span>offsetTop <span class="token operator">+</span> header<span class="token punctuation">.</span>offsetHeight<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> + + div<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>multiple<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> open <span class="token operator">=</span> div<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"data-open"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + e<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>open<span class="token punctuation">)</span> <span class="token punctuation">{</span> + div<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"data-open"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + div<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"data-open"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + div<span class="token punctuation">.</span><span class="token function-variable function">onkeyup</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>keyCode <span class="token operator">===</span> <span class="token number">13</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + div<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>div<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"data-open"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + div<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"data-open"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">const</span> width <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span> + <span class="token operator">...</span>Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + span<span class="token punctuation">.</span>innerText <span class="token operator">=</span> e<span class="token punctuation">.</span>label<span class="token punctuation">;</span> + <span class="token keyword">return</span> div<span class="token punctuation">.</span>offsetWidth<span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> + + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>width<span class="token punctuation">)</span><span class="token punctuation">;</span> + div<span class="token punctuation">.</span>style<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>width<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +document<span class="token punctuation">.</span>forms<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onsubmit</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + submit<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span>data<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</pre> +</div> <h4 id="result_3">Result</h4> +<iframe width="100%" height="300" src="https://mdn.github.io/html-examples/custom-select" loading="lazy"></iframe> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, <a href="../content_categories#interactive_content">interactive content</a>, <a href="../content_categories#form_listed">listed</a>, <a href="../content_categories#form_labelable">labelable</a>, <a href="../content_categories#form_resettable">resettable</a>, and <a href="../content_categories#form_submittable">submittable</a> <a href="../content_categories#form-associated_">form-associated </a>element </td> </tr> <tr> <th scope="row">Permitted content</th> <td> Zero or more <a href="option"><code><option></code></a> or <a href="optgroup"><code><optgroup></code></a> elements. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role"><code>combobox</code></a> with <strong>no</strong> <code>multiple</code> attribute and <strong>no</strong> <code>size</code> attribute greater than 1, otherwise <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role"><code>listbox</code></a> </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role"><code>menu</code></a> with <strong>no</strong> <code>multiple</code> attribute and <strong>no</strong> <code>size</code> attribute greater than 1, otherwise no <code>role</code> permitted </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement"><code>HTMLSelectElement</code></a></td> </tr> </tbody> </table></div></figure></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element">HTML Standard <br><small># the-select-element</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody> +<tr> +<th><code>select</code></th> +<td class="bc-supports-yes"><details><summary>1</summary><code>border-radius</code> on <code><select></code> elements is ignored unless <code>-webkit-appearance</code> is overridden to an appropriate value.</details></td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>1</summary>Historically, Firefox has allowed keyboard and mouse events to bubble up from the <code><option></code> element to the parent <code><select></code> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode the <code><select></code> element is displayed as a drop-down list. The behavior is unchanged if the <code><select></code> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <code><option></code> elements for events, you should watch for change events on <code><select></code>. See <a href="https://bugzil.la/1090602">bug 1090602</a> for details.</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes"><details><summary>1</summary><code>border-radius</code> on <code><select></code> elements is ignored unless <code>-webkit-appearance</code> is overridden to an appropriate value.</details></td> +<td class="bc-supports-yes"><details><summary>≤37</summary>["In the Browser app for Android 4.1 (and possibly later versions), there is a bug where the menu indicator triangle on the side of a <code><select></code> will not be displayed if a <code>background</code>, <code>border</code>, or <code>border-radius</code> style is applied to the <code><select></code>.", "<code>border-radius</code> on <code><select></code> elements is ignored unless <code>-webkit-appearance</code> is overridden to an appropriate value."]</details></td> +<td class="bc-supports-yes"><details><summary>18</summary><code>border-radius</code> on <code><select></code> elements is ignored unless <code>-webkit-appearance</code> is overridden to an appropriate value.</details></td> +<td class="bc-supports-yes"><details><summary>4</summary>Firefox for Android, by default, sets a <code>background-image</code> gradient on all <code><select multiple></code> elements. This can be disabled using <code>background-image: none</code>.</details></td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes"><details><summary>1</summary><code>border-radius</code> on <code><select></code> elements is ignored unless <code>-webkit-appearance</code> is overridden to an appropriate value.</details></td> +<td class="bc-supports-yes"><details><summary>1.0</summary><code>border-radius</code> on <code><select></code> elements is ignored unless <code>-webkit-appearance</code> is overridden to an appropriate value.</details></td> +</tr> +<tr> +<th><code>disabled</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>form</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>multiple</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>name</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>required</code></th> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>size</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">3</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">2</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>Events fired by <code><select></code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> +</li> <li>The <a href="option"><code><option></code></a> element</li> <li>The <a href="optgroup"><code><optgroup></code></a> element</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select</a> + </p> +</div> |