From 1a4f437c4e3032cd2198bb76a44ce2fd0ba641d9 Mon Sep 17 00:00:00 2001
From: Vitalii Perehonchuk <brute18@gmail.com>
Date: Fri, 22 Mar 2024 17:55:07 +0200
Subject: [PATCH] update(HTML): web/html/element/select

---
 files/uk/web/html/element/select/index.md | 84 +++++++++++------------
 1 file changed, 40 insertions(+), 44 deletions(-)

diff --git a/files/uk/web/html/element/select/index.md b/files/uk/web/html/element/select/index.md
index 4109a74314..a46dd36a95 100644
--- a/files/uk/web/html/element/select/index.md
+++ b/files/uk/web/html/element/select/index.md
@@ -232,35 +232,36 @@ browser-compat: html.elements.select
 
 Цей приклад показує, як можна було б використати трохи CSS та JavaScript для більш детального власного оформлення рамки `<select>`.
 
-Цей приклад по суті:
+Сам приклад:
 
 - Клонує контекст `<select>` (елементи [`<option>`](/uk/docs/Web/HTML/Element/option)) в обгортку-предка та наново реалізує стандартну очікувану поведінку за допомогою додаткових елементів HTML та JavaScript. В тому числі базову поведінку табуляції для надання доступності з клавіатури.
 - Відтворює певні стандартні нативні атрибути у вигляді `data-`-атрибутів нових елементів, щоб керувати станом та CSS.
 
-> **Примітка:** Не всі нативні можливості підтримуються, це лишень підтвердження концепції. Реалізація заснована на стандартному HTML, але таких само результатів можна досягти на основі JSON-даних, власного HTML чи інших рішень.
+> **Примітка:** Не всі нативні можливості підтримуються; це лишень підтвердження концепції. Реалізація заснована на стандартному HTML, але таких само результатів можна було б досягти на основі JSON-даних, власного HTML чи інших рішень.
 
 #### HTML
 
 ```html
 <form>
-  <fieldset>
-    <legend>Стандартні контрольні елементи</legend>
-    <select name="1A" id="select" autocomplete="off" required>
+  <section>
+    <label for="select-standard">Стандартні контрольні елементи:</label>
+    <select name="1A" id="select-standard">
       <option>Морква</option>
       <option>Горох</option>
       <option>Квасоля</option>
       <option>Дихлордифенілтрихлорметилметан</option>
     </select>
-  </fieldset>
-  <fieldset id="custom">
-    <legend>Власні контрольні елементи</legend>
-    <select name="2A" id="select" autocomplete="off" required>
+  </section>
+  <hr />
+  <section id="custom">
+    <label for="select-custom">Власні контрольні елементи:</label>
+    <select name="2A" id="select-custom">
       <option>Морква</option>
       <option>Горох</option>
       <option>Квасоля</option>
       <option>Дихлордифенілтрихлорметилметан</option>
     </select>
-  </fieldset>
+  </section>
 </form>
 ```
 
@@ -269,17 +270,26 @@ browser-compat: html.elements.select
 ```css
 body {
   font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+  padding: 20px;
+}
+
+hr {
+  margin: 20px 0;
+}
+
+label {
+  margin-right: 10px;
 }
 
 .select:focus {
   border-color: blue;
 }
 
-html body form fieldset#custom div.select[data-multiple] div.header {
+.select[data-multiple] header {
   display: none;
 }
 
-html body form fieldset#custom div.select div.header {
+.select div.header {
   content: "↓";
   display: flex;
   flex: 1;
@@ -294,7 +304,7 @@ html body form fieldset#custom div.select div.header {
   border-radius: inherit;
 }
 
-html body form fieldset#custom div.select div.header::after {
+.select .header::after {
   content: "↓";
   align-self: stretch;
   display: flex;
@@ -305,7 +315,7 @@ html body form fieldset#custom div.select div.header::after {
   padding: 0.5em;
 }
 
-html body form fieldset#custom div.select div.header:hover::after {
+.select .header:hover::after {
   background-color: blue;
 }
 
@@ -319,16 +329,14 @@ html body form fieldset#custom div.select div.header:hover::after {
   flex: 1;
   display: none;
 }
-
 .select .header select optgroup {
   display: none;
 }
-
 .select select div.option {
   display: none;
 }
 
-html body form fieldset#custom div.select {
+.select {
   user-select: none;
   box-sizing: border-box;
   position: relative;
@@ -340,21 +348,21 @@ html body form fieldset#custom div.select {
   display: inline-block;
 }
 
-html body form fieldset#custom div.select:focus,
-html body form fieldset#custom div.select:hover {
+.select:focus,
+.select:hover {
   border-color: blue;
 }
 
-html body form fieldset#custom div.select[data-open] {
+.select[data-open] {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-html body form fieldset#custom div.select[data-open] datalist {
+.select[data-open] datalist {
   display: initial;
 }
 
-html body form fieldset#custom div.select datalist {
+.select datalist {
   appearance: none;
   position: absolute;
   border-style: solid;
@@ -369,7 +377,7 @@ html body form fieldset#custom div.select datalist {
   border-bottom-right-radius: 4px;
 }
 
-html body form fieldset#custom div.select datalist div.option {
+.select datalist .option {
   background-color: white;
   margin-bottom: 1px;
   cursor: pointer;
@@ -377,44 +385,32 @@ html body form fieldset#custom div.select datalist div.option {
   border-width: 0;
 }
 
-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 {
+.select datalist .option:hover,
+.select datalist .option:focus,
+.select datalist .option:checked {
   background-color: blue;
   color: white;
 }
 
-html
-  body
-  form
-  fieldset#custom
-  div.select
-  div.optgroup
-  div.option[data-disabled] {
+.select .optgroup .option[data-disabled] {
   color: gray;
 }
 
-html
-  body
-  form
-  fieldset#custom
-  div.select
-  div.optgroup
-  div.option[data-checked] {
+.select .optgroup .option[data-checked] {
   background-color: blue;
   color: white;
 }
 
-html body form fieldset#custom div.select div.optgroup div.label {
+.select .optgroup .label {
   font-weight: bold;
 }
 
-html body form fieldset#custom div.select div.optgroup div.option div.label {
+.select .optgroup .option .label {
   font-weight: normal;
   padding: 0.25em;
 }
 
-html body form fieldset#custom div.select div.header span {
+.select .header span {
   flex: 1;
   padding: 0.5em;
 }
@@ -579,7 +575,7 @@ document.forms[0].onsubmit = (e) => {
 
 #### Результат
 
-{{EmbedGHLiveSample("html-examples/custom-select", '100%', 300)}}
+{{EmbedLiveSample("vlasne-oformlennia-select", "100%", "270")}}
 
 ## Занепокоєння щодо доступності