Skip to content

Commit

Permalink
update(HTML): web/html/element/select
Browse files Browse the repository at this point in the history
  • Loading branch information
undead404 committed Mar 22, 2024
1 parent bf1adc2 commit 1a4f437
Showing 1 changed file with 40 additions and 44 deletions.
84 changes: 40 additions & 44 deletions files/uk/web/html/element/select/index.md
Original file line number Diff line number Diff line change
@@ -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,52 +377,40 @@ 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;
padding: 0.5em;
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")}}

## Занепокоєння щодо доступності

0 comments on commit 1a4f437

Please sign in to comment.