initial commit

1 files changed, 636 insertions, 0 deletions

diff --git a/files/ja/web/html/element/select/index.html b/files/ja/web/html/element/select/index.html
new file mode 100644
index 0000000000..85024c4642
--- /dev/null
+++ b/files/ja/web/html/element/select/index.html
@@ -0,0 +1,636 @@
+---
+title: '<select>: HTML 選択要素'
+slug: Web/HTML/Element/select
+tags:
+  - HTML
+  - HTML フォーム
+  - Reference
+  - events
+  - ウェブ
+  - フォーム
+  - リファレンス
+  - 要素
+translation_of: Web/HTML/Element/select
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML の <code>&lt;select&gt;</code> 要素</strong>は、選択式のメニューを提供するコントロールを表します。</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}</div>
+
+<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+
+<p>上のデモは、典型的な <code>&lt;select&gt;</code> の利用方法を示しています。アクセシビリティのために、 {{htmlelement("label")}} と結び付けられるように <code>id</code> 属性が与えられています。それぞれのメニューの選択肢は、 <code>&lt;select&gt;</code> の中の {{htmlelement("option")}} 要素で定義されています。</p>
+
+<p><code>&lt;option&gt;</code> 要素は、選択肢が選択されたときにサーバーに送信するデータの値を含む {{htmlattrxref("value", "option")}} 属性を持ちます。 <code>value</code> 属性が含まれない場合、既定で要素の中に含まれるテキストの値が使用されます。 <code>&lt;option&gt;</code> 要素に {{htmlattrxref("selected")}} 属性を付けることで、ページが最初に読み込まれたときに既定で選択状態にすることができます。</p>
+
+<p><code>&lt;select&gt;</code> 要素は、複数の選択肢を選択することができるかどうかを定める <code>multiple</code>、同時にいくつの選択肢を表示することができるかを定める <code>size</code> など、制御のために利用することができる固有の属性がいくつかあります。 <code>required</code>, <code>disabled</code>, <code>autofocus</code>, などのような一般のフォーム入力属性の多くも受け付けます。</p>
+
+<p>さらに、 <code>&lt;option&gt;</code> 要素を {{htmlelement("optgroup")}} 要素の中に入れることで、ドロップダウンの中で選択肢をグループに分割することができます。</p>
+
+<p>その他の例は、<a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets#Drop-down_content">ネイティブフォームウィジェット: ドロップダウンコンテンツ</a>を参照してください。</p>
+
+<h2 id="Attributes" name="Attributes">属性</h2>
+
+<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p>
+
+<dl>
+ <dt>{{htmlattrdef("autocomplete")}}</dt>
+ <dd>{{domxref("DOMString")}} で、{{Glossary("user agent", "ユーザーエージェント")}}の自動補完機能のヒントを提供します。値の完全なリストや自動補完の使い方の詳細は、 <a href="/ja/docs/Web/HTML/Attributes/autocomplete">HTML の autocomplete 属性</a>を参照してください。</dd>
+ <dt>{{htmlattrdef("autofocus")}}</dt>
+ <dd>真偽値属性で、ページが読み込まれた時にこのフォームコントロールが入力フォーカスを持つべきであることを指定することができます。文書内で <code>autofocus</code> 属性を持つことができるフォーム要素は一つだけです。</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>真偽値属性で、ユーザーがそのコントロールを利用することができないことを示します。もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば {{htmlelement("fieldset")}} 要素から継承します。もし親要素に <code>disabled</code> 属性を持つものがなければ、そのコントロールは利用可能です。</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd><code>&lt;select&gt;</code> を関連付ける {{HTMLElement("form")}} 要素 (<em>フォームオーナー</em>) です。この属性の値は、同じ文書内の <code>form</code> 要素の {{htmlattrxref("id")}} でなければなりません。 (この属性が設定されていない場合は、 <code>&lt;select&gt;</code> はその祖先である <code>&lt;form&gt;</code> が存在すればそれと関連付けられます。)</dd>
+ <dd>この属性によって、 <code>&lt;select&gt;</code> 要素は、 <code>&lt;form&gt;</code> 要素の子孫に限らず、文書内のどこの <code>&lt;form&gt;</code> と結び付けることもできます。これは祖先の <code>&lt;form&gt;</code> を上書きすることもできます。</dd>
+ <dt>{{htmlattrdef("multiple")}}</dt>
+ <dd>真偽値属性で、リストの複数の選択肢を選択することができることを示します。指定されていない場合は、一度に選択することができる選択肢は一つだけです。 <code>multiple</code> が指定されている場合、多くのブラウザーは単一行のドロップダウンの代わりに、スクロールするリストボックスを表示します。</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>この属性は、コントロールの名前を指定するために使用します。</dd>
+ <dt>{{htmlattrdef("required")}}</dt>
+ <dd>真偽値属性で、空ではない文字列の値の選択肢を選択しなければならないことを示します。</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>
+ <p>コントロールがスクロールするリストボックスとして表示される場合 (つまり、 <code>multiple</code> が指定されている場合)、この属性は一度に見えるべきリストの行数を表します。ブラウザーは、 select 要素をスクロールリストボックスとして提供する必要はありません。既定値は <code>0</code> です。</p>
+
+ <div class="note"><strong>注:</strong> HTML5 の仕様によると、 size 属性の初期値は <code>1</code> であるべきとされています。しかしながら、実際のところは、このことによっていくつかのウェブサイトを壊してしまうことがわかり、他のブラウザーでも現在そうしているものはなく、 Mozilla は当分の間、 Firefox でも <code>0</code> を返し続けることを選択しました。</div>
+ </dd>
+</dl>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<h3 id="Selecting_multiple_options" name="Selecting_multiple_options">複数の項目の選択</h3>
+
+<p>デスクトップコンピューターでは、 <code>&lt;select&gt;</code> 要素に <code>multiple</code> 属性がついている場合に、複数の項目を選択する方法がいくつもあります。</p>
+
+<p>マウスを使用すると、 <kbd>Ctrl</kbd>, <kbd>Command</kbd>, <kbd>Shift</kbd> キー (オペレーティングシステムによって異なります) を押しながらクリックすることで、複数の項目を選択または解除することができます。</p>
+
+<div class="blockIndicator warning">
+<p><strong>警告</strong>: キーボードから連続していない複数の項目を選択する仕組みは、今のところ Firefox でしか動作しないようです。</p>
+
+<p><strong>注:</strong> macOS では、 <kbd>Ctrl</kbd> + <kbd>↑</kbd> および <kbd>Ctrl</kbd> + <kbd>↓</kbd> のショートカットが、 OS 既定の <em>Mission Control</em> および <em>Application windows</em> のショートカットと競合するため、動作させるためにはこれらをオフにしなければならないでしょう。</p>
+</div>
+
+<p>キーボードを使用して、連続した複数の項目を選択するには以下のようにします。</p>
+
+<ul>
+ <li><code>&lt;select&gt;</code> 要素にフォーカスを移動します。 (例えば <kbd>Tab</kbd> を使用するなど)。</li>
+ <li><kbd>↑</kbd> および <kbd>↓</kbd> のカーソルキーを使用して、項目を上下に移動し、選択したい範囲の先頭または末尾の項目を選択する。</li>
+ <li><kbd>Shift</kbd> キーを押したまま <kbd>↑</kbd> および <kbd>↓</kbd> のカーソルキーを使用して、項目を選択する範囲を増加または減少させる。</li>
+</ul>
+
+<p>キーボードを使用して、連続していない複数の項目を選択するには以下のようにします。</p>
+
+<ul>
+ <li><code>&lt;select&gt;</code> 要素にフォーカスを移動します。 (例えば <kbd>Tab</kbd> を使用するなど)。</li>
+ <li><kbd>Ctrl</kbd> キーを押したまま <kbd>↑</kbd> および <kbd>↓</kbd> のカーソルキーを使用して「フォーカスのある」選択肢を、選択したいものに移動します。「フォーカスのある」選択肢は、キーボードでリンクをフォーカスしたときと同様に、点線の輪郭線で強調されます。</li>
+ <li><kbd>スペース</kbd>を押して「フォーカスのある」選択肢を選択または解除します。</li>
+</ul>
+
+<h2 id="Styling_with_CSS" name="Styling_with_CSS">CSS のスタイル付け</h2>
+
+<p><code>&lt;select&gt;</code> 要素は、 CSS を使って生産的にスタイル付けすることが困難です。他の要素のように、特定の側面で影響を与えることはできます。 — 例えば、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model">ボックスモデル</a>や<a href="/ja/docs/Web/CSS/CSS_Fonts">表示されるフォント</a>を操作する、 {{cssxref("appearance")}} プロパティを使用してシステムの既定の <code>appearance</code> を削除することができます。</p>
+
+<p>しかし、これらのプロパティはブラウザー間で一貫した結果が得られませんし、異なる種類のフォーム要素を互いに一列に並べたりするのは困難なことです。 <code>&lt;select&gt;</code> 要素の内部構造は複雑で、制御するのは困難です。完全に制御したいのであれば、スタイル付けをするのに優れた機能を備えたライブラリを使用するか、非意味的要素や JavaScript や <a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> をを使用して独自のドロップダウンメニューを実装することを検討してください。</p>
+
+<p><code>&lt;select&gt;</code> のスタイル付けについてのさらなる有益な情報は、以下を参照してください。</p>
+
+<ul>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML フォームのスタイル付け</a></li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTML フォームの高度なスタイル付け</a></li>
+</ul>
+
+<p>Also see the "Customizing select styles" example below for an example of you could attempt a simple <code>&lt;select&gt;</code> styling.</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_select" name="Basic_select">基本的な select</h3>
+
+<p>以下の例では、とても簡単なドロップダウンメニューを生成し、既定で第二の選択肢を選択状態にしておきます。</p>
+
+<pre class="brush: html notranslate">&lt;!-- 最初に Second Value が選択されます。 --&gt;
+&lt;select name="choice"&gt;
+  &lt;option value="first"&gt;First Value&lt;/option&gt;
+  &lt;option value="second" selected&gt;Second Value&lt;/option&gt;
+  &lt;option value="third"&gt;Third Value&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Basic_select", "", "100")}}</p>
+
+<h3 id="Advanced_select_with_multiple_features" name="Advanced_select_with_multiple_features">高度な複数選択の機能</h3>
+
+<p>以下の例はもっと複雑で、 <code>&lt;select&gt;</code> 要素で使用できる機能をもっと示しています。</p>
+
+<pre class="brush: html notranslate">&lt;label&gt;Please choose one or more pets:
+  &lt;select name="pets" multiple size="4"&gt;
+    &lt;optgroup label="4-legged pets"&gt;
+      &lt;option value="dog"&gt;Dog&lt;/option&gt;
+      &lt;option value="cat"&gt;Cat&lt;/option&gt;
+      &lt;option value="hamster" disabled&gt;Hamster&lt;/option&gt;
+    &lt;/optgroup&gt;
+    &lt;optgroup label="Flying pets"&gt;
+      &lt;option value="parrot"&gt;Parrot&lt;/option&gt;
+      &lt;option value="macaw"&gt;Macaw&lt;/option&gt;
+      &lt;option value="albatross"&gt;Albatross&lt;/option&gt;
+    &lt;/optgroup&gt;
+  &lt;/select&gt;
+&lt;/label&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Advanced_select_with_multiple_features", "", "100")}}</p>
+
+<p>次のことが分かるでしょう。</p>
+
+<ul>
+ <li><code>multiple</code> 属性を入れてあるので、複数のオプションを選択することができます。</li>
+ <li><code>size</code> 属性は、同時に4行だけ表示できるようにします。スクロールしてすべての選択肢を表示することができます。</li>
+ <li>{{htmlelement("optgroup")}} を入れることで、選択肢を複数のグループに分割しています。これは純粋に視覚的なグループ化であり、視覚表現は通常、太字のグループ名と字下げした選択肢で構成されます。</li>
+ <li>"Hamster" の選択肢には <code>disabled</code> 属性が入っているので、選択することができません。</li>
+</ul>
+
+<h3 id="Customizing_select_styles" name="Customizing_select_styles">select のスタイルのカスタマイズ</h3>
+
+<p>この例では、 CSS と JavaScript を使用して <code>&lt;select&gt;</code> ボックスに広範な独自スタイルを適用する方法を示しています。</p>
+
+<p>この例では基本的に以下のことを行います。</p>
+
+<ul>
+ <li>親ラッパーの <code>&lt;select&gt;</code> のコンテキスト ({{HTMLElement("option")}}}) を複製し、追加の HTML 要素と JavaScript を使用して標準の期待される動作を再実装します。これには、キーボードアクセシビリティを提供するための基本的なタブの動作が含まれます。</li>
+ <li>状態と CSS を管理するために、いくつかの標準ネイティブの <code>属性</code> を新しい要素の <code>data-attributes</code> に対応付けします。</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>すべてのネイティブ機能をサポートしているわけではありません。これは標準的な HTML から始まりますが、 JSON データ、カスタム HTML、または他のソリューションから始めても同じ結果を得ることができます。</p>
+</div>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+   &lt;head&gt;
+      &lt;meta charset="UTF-8"&gt;
+      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
+      &lt;title&gt;Select&lt;/title&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;form&gt;
+         &lt;fieldset&gt;
+            &lt;legend&gt;Standard controls&lt;/legend&gt;
+            &lt;select
+               name=1A
+               id=select
+               autocomplete=off
+               required
+               &gt;
+               &lt;option&gt;Carrots&lt;/option&gt;
+               &lt;option&gt;Peas&lt;/option&gt;
+               &lt;option&gt;Beans&lt;/option&gt;
+               &lt;option&gt;Pneumonoultramicroscopicsilicovolcanoconiosis&lt;/option&gt;
+            &lt;/select&gt;
+            &lt;label for="1B"&gt;1B&lt;/label&gt;
+            &lt;select name="1B" multiple size="4" required&gt;
+               &lt;optgroup label="4-legged pets"&gt;
+                  &lt;option value="dog"&gt;Dog&lt;/option&gt;
+                  &lt;option value="cat"&gt;Cat&lt;/option&gt;
+                  &lt;option value="hamster" disabled&gt;Hamster&lt;/option&gt;
+               &lt;/optgroup&gt;
+               &lt;optgroup label="Flying pets"&gt;
+                  &lt;option value="parrot"&gt;Parrot&lt;/option&gt;
+                  &lt;option value="macaw"&gt;Macaw&lt;/option&gt;
+                  &lt;option value="albatross"&gt;Albatross&lt;/option&gt;
+               &lt;/optgroup&gt;
+               &lt;option value="albatross"&gt;Albatross&lt;/option&gt;
+            &lt;/select&gt;
+            &lt;label for="1C"&gt;1C&lt;/label&gt;
+            &lt;select name="1C" required&gt;
+               &lt;option value="first"&gt;First Value&lt;/option&gt;
+               &lt;option value="second" selected&gt;Second Value&lt;/option&gt;
+               &lt;option value="third"&gt;Third Value&lt;/option&gt;
+            &lt;/select&gt;
+         &lt;/fieldset&gt;
+         &lt;fieldset id=custom&gt;
+            &lt;legend&gt;Custom controls&lt;/legend&gt;
+            &lt;select
+               name="2A"
+               id="select"
+               autocomplete="off"
+               required
+               &gt;
+               &lt;option&gt;Carrots&lt;/option&gt;
+               &lt;option&gt;Peas&lt;/option&gt;
+               &lt;option&gt;Beans&lt;/option&gt;
+               &lt;option&gt;Pneumonoultramicroscopicsilicovolcanoconiosis&lt;/option&gt;
+            &lt;/select&gt;
+            &lt;label for=2B&gt;2B&lt;/label&gt;
+            &lt;select id=2B name="2B" multiple size="4" required&gt;
+               &lt;optgroup label="4-legged pets"&gt;
+                  &lt;option value="dog"&gt;Dog&lt;/option&gt;
+                  &lt;option value="cat"&gt;Cat&lt;/option&gt;
+                  &lt;option value="hamster" disabled&gt;Hamster&lt;/option&gt;
+               &lt;/optgroup&gt;
+               &lt;optgroup label="Flying pets"&gt;
+                  &lt;option value="parrot"&gt;Parrot&lt;/option&gt;
+                  &lt;option value="macaw"&gt;Macaw&lt;/option&gt;
+                  &lt;option value="albatross"&gt;Albatross&lt;/option&gt;
+               &lt;/optgroup&gt;
+            &lt;/select&gt;
+            &lt;label for="2C"&gt;2C&lt;/label&gt;
+            &lt;select name="2C" required&gt;
+               &lt;option value="first"&gt;First Value&lt;/option&gt;
+               &lt;option value="second" selected&gt;Second Value&lt;/option&gt;
+               &lt;option value="third"&gt;Third Value&lt;/option&gt;
+            &lt;/select&gt;
+         &lt;/fieldset&gt;
+         &lt;button type="reset"&gt;Reset&lt;/button&gt;
+         &lt;button type="submit"&gt;Submit&lt;/button&gt;
+      &lt;/form&gt;
+      &lt;code id=submit&gt;&lt;/code&gt;
+      &lt;link rel=stylesheet href=style.css&gt;
+      &lt;script src="script.js"&gt;&lt;/script&gt;
+   &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
+}
+
+.select:focus {
+	border-color: blue;
+}
+
+html body form fieldset#custom div.select[data-multiple] div.header {
+	display: none;
+}
+
+html body form fieldset#custom div.select div.header {
+	content: '↓';
+	display: -webkit-inline-box;
+	display: -ms-inline-flexbox;
+	display: inline-flex;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	padding: 0;
+	position: relative;
+}
+
+html body form fieldset#custom div.select div.header::after {
+	content: '↓';
+	align-self: stretch;
+	display: flex;
+	align-content: center;
+	justify-content: center;
+	justify-items: center;
+	align-items: center;
+	padding: .5em;
+}
+
+html body form fieldset#custom div.select div.header:hover:after {
+	background-color: blue;
+}
+
+.select .header select {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	font-family: inherit;
+	font-size: inherit;
+	padding: 0;
+	border-width: 0;
+	width: 100%;
+	flex: 1;
+	display: none;
+}
+
+.select .header select optgroup {
+	display: none;
+}
+
+.select select div.option {
+	display: none;
+}
+
+html body form fieldset#custom div.select {
+	user-select: none;
+	box-sizing: border-box;
+	position: relative;
+	border-radius: 4px;
+	border-style: solid;
+	border-width: 0;
+	border-color: gray;
+	width: auto;
+	display: inline-block;
+}
+
+html body form fieldset#custom div.select:focus {
+	border-color: blue;
+}
+
+html body form fieldset#custom div.select:hover {
+	border-color: blue;
+}
+
+html body form fieldset#custom div.select[data-open] {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+html body form fieldset#custom div.select[data-open] datalist {
+	display: initial;
+}
+
+html body form fieldset#custom div.select datalist {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	position: absolute;
+	border-style: solid;
+	border-width: 1px;
+	border-color: gray;
+	left: 0;
+	display: none;
+	width: 100%;
+	box-sizing: border-box;
+	z-index: 2;
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+}
+
+html body form fieldset#custom div.select datalist div.option {
+	background-color: white;
+	margin-bottom: 1px;
+	cursor: pointer;
+	padding: 0.5em;
+	border-width: 0;
+}
+
+html body form fieldset#custom div.select datalist div.option:hover {
+	background-color: blue;
+	color: white;
+}
+
+html body form fieldset#custom div.select datalist div.option:focus {
+	background-color: blue;
+	color: white;
+}
+
+html body form fieldset#custom div.select datalist div.option:checked {
+	background-color: blue;
+	color: white;
+}
+
+html body form fieldset#custom div.select div.optgroup div.option[data-disabled] {
+	color: gray;
+}
+
+html body form fieldset#custom div.select div.optgroup div.option[data-checked] {
+	background-color: blue;
+	color: white;
+}
+
+html body form fieldset#custom div.select div.optgroup div.label {
+	font-weight: bold;
+}
+
+html body form fieldset#custom div.select div.optgroup div.option div.label {
+	font-weight: normal;
+	padding: .25em;
+}
+
+html body form fieldset#custom div.select div.header {
+	flex: 1;
+	display: flex;
+	width: auto;
+	box-sizing: border-box;
+	border-width: 1px;
+	border-style: inherit;
+	border-color: inherit;
+	border-radius: inherit;
+}
+
+html body form fieldset#custom div.select div.header span {
+	flex: 1;
+	padding: .5em;
+}
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">const selects = custom.querySelectorAll('select');
+for (const select of selects) {
+    const div = document.createElement('div');
+    const header = document.createElement('div');
+    const datalist = document.createElement('datalist');
+    const optgroups = select.querySelectorAll('optgroup');
+    const span = document.createElement('span');
+    const options = select.options;
+    const parent = select.parentElement;
+    const multiple = select.hasAttribute('multiple');
+    const onclick = function(e) {
+        const disabled = this.hasAttribute('data-disabled');
+        select.value = this.dataset.value;
+        span.innerText = this.dataset.label;
+        if (disabled) return;
+        if (multiple) {
+            if (e.shiftKey) {
+                const checked = this.hasAttribute("data-checked");
+                if (checked) {
+                    this.removeAttribute("data-checked");
+                } else {
+                    this.setAttribute("data-checked", "");
+                };
+            } else {
+                const options = div.querySelectorAll('.option');
+                for (i = 0; i &lt; options.length; i++) {
+                    const option = options[i];
+                    option.removeAttribute("data-checked");
+                };
+                this.setAttribute("data-checked", "");
+            };
+        };
+    };
+    const onkeyup = function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.keyCode === 13) {
+            this.click();
+        }
+    };
+    div.classList.add('select');
+    header.classList.add('header');
+    div.tabIndex = 1;
+    select.tabIndex = -1;
+    span.innerText = select.label;
+    header.appendChild(span);
+    for (attribute of select.attributes) div.dataset[attribute.name] = attribute.value;
+    for (i = 0; i &lt; options.length; i++) {
+        const option = document.createElement('div');
+        const label = document.createElement('div');
+        const o = options[i];
+        for (attribute of o.attributes) option.dataset[attribute.name] = attribute.value;
+        option.classList.add('option');
+        label.classList.add('label');
+        label.innerText = o.label;
+        option.dataset.value = o.value;
+        option.dataset.label = o.label;
+        option.onclick = onclick;
+        option.onkeyup = onkeyup;
+        option.tabIndex = i + 1;
+        option.appendChild(label);
+        datalist.appendChild(option);
+    }
+    div.appendChild(header);
+    for (o of optgroups) {
+        const optgroup = document.createElement('div');
+        const label = document.createElement('div');
+        const options = o.querySelectorAll('option');
+        Object.assign(optgroup, o);
+        optgroup.classList.add('optgroup');
+        label.classList.add('label');
+        label.innerText = o.label;
+        optgroup.appendChild(label);
+        div.appendChild(optgroup);
+        for (o of options) {
+            const option = document.createElement('div');
+            const label = document.createElement('div');
+            for (attribute of o.attributes) option.dataset[attribute.name] = attribute.value;
+            option.classList.add('option');
+            label.classList.add('label');
+            label.innerText = o.label;
+            option.tabIndex = i + 1;
+            option.dataset.value = o.value;
+            option.dataset.label = o.label;
+            option.onclick = onclick;
+            option.onkeyup = onkeyup;
+            option.tabIndex = i + 1;
+            option.appendChild(label);
+            optgroup.appendChild(option);
+        };
+    };
+    div.onclick = function(e) {
+        e.preventDefault();
+    }
+    parent.insertBefore(div, select);
+    header.appendChild(select);
+    div.appendChild(datalist);
+    datalist.style.top = header.offsetTop + header.offsetHeight + 'px';
+    div.onclick = function(e) {
+        if (multiple) {
+
+        } else {
+            const open = this.hasAttribute("data-open");
+            e.stopPropagation();
+            if (open) {
+                this.removeAttribute("data-open");
+            } else {
+                this.setAttribute("data-open", "");
+            }
+        }
+    };
+    div.onkeyup = function(event) {
+        event.preventDefault();
+        if (event.keyCode === 13) {
+            this.click();
+        }
+    };
+    document.addEventListener('click', function(e) {
+        if (div.hasAttribute("data-open")) div.removeAttribute("data-open");
+    });
+    const width = Math.max(...Array.from(options).map(function(e) {
+        span.innerText = e.label;
+        return div.offsetWidth;
+    }));
+    console.log(width)
+    div.style.width = width + 'px';
+}
+document.forms[0].onsubmit = function(e) {
+    const data = new FormData(this);
+    e.preventDefault();
+    submit.innerText = JSON.stringify([...data.entries()]);
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('Customizing_select_styles', '100%', 300)}}</p>
+
+<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
+   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_listed">リスト化</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_labelable">ラベル付け可能</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_resettable">リセット可能</a>、及び<a href="/ja/docs/Web/HTML/Content_categories#Form_submittable">サブミット可能</a>な<a href="/ja/docs/Web/HTML/Content_categories#Form-associated_">フォーム関連コンテンツ</a>要素</td>
+  </tr>
+  <tr>
+   <th scope="row">許可されている内容</th>
+   <td>0 個以上の {{HTMLElement("option")}} 要素または {{HTMLElement("optgroup")}} 要素</td>
+  </tr>
+  <tr>
+   <th scope="row">タグの省略</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">許可されている親要素</th>
+   <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td>
+  </tr>
+  <tr>
+   <th scope="row">暗黙の ARIA ロール</th>
+   <td><code>multiple</code> 属性が<strong>なく</strong>、 1 よりも大きい <code>size</code> 属性が<strong>ない</strong>ならば {{ARIARole("combobox")}}、それ以外の場合は {{ARIARole("listbox")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">許可されている ARIA ロール</th>
+   <td><code>multiple</code> 属性が<strong>なく</strong>、 1 よりも大きい <code>size</code> 属性が<strong>ない</strong>ならば {{ARIARole("menu")}}、それ以外の場合は許可されている <code>role</code> はなし</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM インターフェイス</th>
+   <td>{{domxref("HTMLSelectElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-select-element', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-select-element', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("html.elements.select")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><code>&lt;select&gt;</code> で発生するイベント: {{domxref("HTMLElement/change_event", "change")}}, {{domxref("HTMLElement/input_event", "input")}}</li>
+ <li>{{HTMLElement("option")}} 要素</li>
+ <li>{{HTMLElement("optgroup")}} 要素</li>
+</ul>