Тег select как изменить - Исправление ошибок и поиск оптимальных решений проблем

The <select> HTML element represents a control that provides a menu of options.

Try it

The above example shows typical <select> usage. It is given an id attribute to enable it to be associated with a <label> for accessibility purposes, as well as a name attribute to represent the name of the associated data point submitted to the server. Each menu option is defined by an <option> element nested inside the <select>.

Each <option> element should have a value attribute containing the data value to submit to the server when that option is selected. If no value attribute is included, the value defaults to the text contained inside the element. You can include a selected attribute on an <option> element to make it selected by default when the page first loads.

The <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once. It also accepts most of the general form input attributes such as required, disabled, autofocus, etc.

You can further nest <option> elements inside <optgroup> elements to create separate groups of options inside the dropdown.

For further examples, see The native form widgets: Drop-down content.

Attributes

This element includes the global attributes.

autocomplete

A string providing a hint for a user agent’s autocomplete feature. See The HTML autocomplete attribute for a complete list of values and details on how to use autocomplete.

autofocus

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 autofocus attribute.

disabled

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 <fieldset>; if there is no containing element with the disabled attribute set, then the control is enabled.

form

The <form> element to associate the <select> with (its form owner). The value of this attribute must be the id of a <form> in the same document. (If this attribute is not set, the <select> is associated with its ancestor <form> element, if any.)

This attribute lets you associate <select> elements to <form>s anywhere in the document, not just inside a <form>. It can also override an ancestor <form> element.

multiple

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 multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.

name

This attribute is used to specify the name of the control.

required

A Boolean attribute indicating that an option with a non-empty string value must be selected.

size

If the control is presented as a scrolling list box (e.g. when multiple 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 0.

Note: According to the HTML specification, the default value for size should be 1; 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 0 for the time being with Firefox.

Usage notes

Selecting multiple options

On a desktop computer, there are a number of ways to select multiple options in a <select> element with a multiple attribute:

Mouse users can hold the Ctrl, Command, or Shift keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them.

Warning: The mechanism for selecting multiple non-contiguous items via the keyboard described below currently only seems to work in Firefox.

On macOS, the Ctrl + Up and Ctrl + Down shortcuts conflict with the OS default shortcuts for Mission Control and Application windows, so you’ll have to turn these off before it will work.

Keyboard users can select multiple contiguous items by:

Focusing on the <select> element (e.g. using
Tab
).
Selecting an item at the top or bottom of the range they want to select using the
Up
and
Down
cursor keys to go up and down the options.
Holding down the
Shift
key and then using the
Up
and
Down
cursor keys to increase or decrease the range of items selected.

Keyboard users can select multiple non-contiguous items by:

Focusing on the <select> element (e.g. using
Tab
).
Holding down the
Ctrl
key then using the
Up
and
Down
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.
Pressing
Space
to select/deselect «focused» select options.

Styling with CSS

The <select> element is notoriously difficult to style productively with CSS. You can affect certain aspects like any element — for example, manipulating the box model, the displayed font, etc., and you can use the appearance property to remove the default system appearance.

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 <select> 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 WAI-ARIA to provide semantics.

For more useful information on styling <select>, see:

Styling HTML forms
Advanced styling for HTML forms

Also see the «Customizing select styles» example below for an example of you could attempt a simple <select> styling.

Examples

Basic select

The following example creates a very simple dropdown menu, the second option of which is selected by default.

<!-- The second value will be selected initially -->
<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

Advanced select with multiple features

The follow example is more complex, showing off more features you can use on a <select> element:

<label>Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>

You’ll see that:

Multiple options are selectable because we’ve included the multiple attribute.
The size attribute causes only 4 lines to display at a time; you can scroll to view all the options.
We’ve included <optgroup> 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.
The «Hamster» option includes a disabled attribute and therefore can’t be selected at all.

Customizing select styles

This example shows how you could use some CSS and JavaScript to provide extensive custom styling for a <select> box.

This example basically:

Clones the <select>‘s context (the <option>s) 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.
Maps some standards native attributes to data-attributes of the new elements in order to manage state and CSS.

Note: 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.

HTML

<form>
  <fieldset>
    <legend>Standard controls</legend>
    <select name="1A" id="select" autocomplete="off" required>
      <option>Carrots</option>
      <option>Peas</option>
      <option>Beans</option>
      <option>Pneumonoultramicroscopicsilicovolcanoconiosis</option>
    </select>
  </fieldset>
  <fieldset id="custom">
    <legend>Custom controls</legend>
    <select name="2A" id="select" autocomplete="off" required>
      <option>Carrots</option>
      <option>Peas</option>
      <option>Beans</option>
      <option>Pneumonoultramicroscopicsilicovolcanoconiosis</option>
    </select>
  </fieldset>
</form>

CSS

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: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  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::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  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,
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 {
  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,
html body form fieldset#custom div.select datalist div.option:focus,
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: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

JavaScript

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');
  function onclick(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 (let i = 0; i < options.length; i++) {
          const option = options[i];
          option.removeAttribute("data-checked");
        }
        this.setAttribute("data-checked", "");
      }
    }
  }

  function onkeyup(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 (const attribute of select.attributes) {
    div.dataset[attribute.name] = attribute.value;
  }
  for (let i = 0; i < options.length; i++) {
    const option = document.createElement('div');
    const label = document.createElement('div');
    const o = options[i];
    for (const 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 (const 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 (const o of options) {
      const option = document.createElement('div');
      const label = document.createElement('div');

      for (const 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 = (e) => {
    e.preventDefault();
  };

  parent.insertBefore(div, select);
  header.appendChild(select);
  div.appendChild(datalist);
  datalist.style.top = `${header.offsetTop + header.offsetHeight}px`;

  div.onclick = (e) => {
    if (!multiple) {
      const open = this.hasAttribute("data-open");
      e.stopPropagation();
      if (open) {
        div.removeAttribute("data-open");
      } else {
        div.setAttribute("data-open", "");
      }
    }
  };

  div.onkeyup = (event) => {
    event.preventDefault();
    if (event.keyCode === 13) {
      div.click();
    }
  };

  document.addEventListener('click', (e) => {
    if (div.hasAttribute("data-open")) {
      div.removeAttribute("data-open");
    }
  });

  const width = Math.max(...Array.from(options).map((e) => {
    span.innerText = e.label;
    return div.offsetWidth;
  }));

  console.log(width);
  div.style.width = `${width}px`;
}
document.forms[0].onsubmit = (e) => {
  const data = new FormData(this);
  e.preventDefault();
  submit.innerText = JSON.stringify([...data.entries()]);
};

Result

Technical summary

Content categories	Flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element
Permitted content	Zero or more `<option>` or `<optgroup>` elements.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	`combobox` with no `multiple` attribute and no `size` attribute greater than 1, otherwise `listbox`
Permitted ARIA roles	`menu` with no `multiple` attribute and no `size` attribute greater than 1, otherwise no `role` permitted
DOM interface	`HTMLSelectElement`

Specifications

Specification
HTML Standard # the-select-element

Browser compatibility

BCD tables only load in the browser

All together:

This solution is easy and has good browser support — it should generally suffice.

If browser support for Internet Explorer is needed, read ahead.

Solution #2 Truncate the select element to hide the default arrow (demo)

—

(Read more here)

Wrap the select element in a div with a fixed width and overflow:hidden.

Then give the select element a width of about 20 pixels greater than the div.

The result is that the default drop-down arrow of the select element will be hidden (due to the overflow:hidden on the container), and you can place any background image you want on the right-hand-side of the div.

The advantage of this approach is that it is cross-browser (Internet Explorer 8 and later, WebKit, and Gecko). However, the disadvantage of this approach is that the options drop-down juts out on the right-hand-side (by the 20 pixels which we hid… because the option elements take the width of the select element).

[It should be noted, however, that if the custom select element is necessary only for mobile devices — then the above problem doesn’t apply — because of the way each phone natively opens the select element. So for mobile, this may be the best solution.]

If the custom arrow is necessary on Firefox — prior to Version 35 — but you don’t need to support old versions of Internet Explorer — then keep reading…

Solution #3 — Use the pointer-events property (demo)

—

(Read more here)

The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.

Advantage: It works well in WebKit and Gecko. It looks good too (no jutting out option elements).

Disadvantage: Internet Explorer (Internet Explorer 10 and down) doesn’t support pointer-events, which means you can’t click the custom arrow. Also, another (obvious) disadvantage with this method is that you can’t target your new arrow image with a hover effect or hand cursor, because we have just disabled pointer events on them!

However, with this method you can use Modernizer or conditional comments to make Internet Explorer revert to the standard built in arrow.

NB: Being that Internet Explorer 10 doesn’t support conditional comments anymore: If you want to use this approach, you should probably use Modernizr. However, it is still possible to exclude the pointer-events CSS from Internet Explorer 10 with a CSS hack described here.

Источник

Когда речь заходит о кастомизации полей формы, наибольшую сложность представляет стилизация HTML-элемента select. В этом случае разработчики часто обращаются за библиотекой или фреймворком, в которых не всегда удачно и в полном объёме воспроизводится вся функциональность нативного элемента управления.

Если не брать во внимание суждения о ценности элементов управления select или подобных им, можно констатировать факт: полностью воссоздать их функции, учесть все нюансы поведения и сохранить доступность для людей с ограниченными возможностями — гиперсложная задача.

Ниже будет показано, что и как можно сделать с внешним видом select с помощью обычного CSS, оставаясь в рамках требований WCAG к доступности (читаемость, контрастность, пользовательские настройки), а также вариантов написания: справа-налево и слева-направо.

Основные стили

Сперва сбросим параметры текста.

select {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

`font`

Свойство font наследует все стили от контейнера(ов). Иногда при сбросе CSS указывают размер шрифта font-size, но в этом нет необходимости. font будет наследовать стили всех своих параметров: font-size, font-family, font-style, font-variant, font-weight, font-stretch и font-height (если установлено). Ещё он добавляет высоту строки line-height. В-общем, шрифт будет адаптироваться к изменениям, которые касаются всей страницы, либо с помощью надстроек, либо через настройки браузера/системы.

`letter-spacing`

Если пользователь (или автор) изменяет параметры текста, чтобы повлиять на расстояние между буквами, это не будет касаться предустановленных для поля значений. Наследование параметров font не повлияет на межбуквенное расстояние, поэтому нужно явно указать необходимость наследования значения letter-spacing: inherit. Это поможет соответствовать требованиям WCAG 2.1 Success Criterion 1.4.12: Text Spacing

`word-spacing`

Аналогично межбуквенному letter-spacing, значение word-spacing для управления интервалами между словами не будет наследоваться, если это не объявить явным образом. WCAG 1.4.12 применяется и для расстояния между словами.

`line-height`

Обратите внимание, что в коде не устанавливается высота строки line-height. Это значение нормально наследуется вместе с остальными параметрами шрифта в свойстве font. Если обнаружится, что это не так (например, из-за явной установки высоты строки ) можно добавить line-height: inherit, чтобы соответствовать WCAG 1.4.12.

Пример

В этом примере демонстрируется применение этого минимального набора стилей.

See this code Простой Select on x.xhtml.ru.

Как настроить стрелку для `select`

Часто, стрелка (индикатор того, что это выпадашка — поле выбора значений) по умолчанию плохо вписывается в дизайн и её лучше заменить на что-нибудь более подходящее. Вот необходимый минимум стилей, с помощью которых можно заменить стрелку у select:

select {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

select:not([multiple]) {
  padding-right: 1.2em;
  background-repeat: no-repeat;
  background-position: calc(100% - 0.25em) 0.35em;
  background-size: 0.85em auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M70.3 13.8L40 66.3 9.7 13.8z' fill='%23000'%3E%3C/path%3E%3C/svg%3E");
}

/* скроет иконку стрелки в IE */
select::-ms-expand {
  display: none;
}

Здесь удаляются стили, устанавливаемые браузером, освобождается место для графической стрелки, а затем новая картинка стрелки вставляется в качестве фона. Это должно применяться только в том случае, если select обычный и предназначен для выбора одиночного значения, а не нескольких (multiple).

See this code Select с измененной стрелкой on x.xhtml.ru.

Этот пример демонстрирует замену стрелки по умолчанию элементу select.

Продолжение настройки `select`

Стоит обратить внимание, что интервалы у текста не очень хороши. Потенциально можно сделать их более привлекательными, удобными и доступными для пользователей с помощью всего нескольких дополнительных стилей. Например, можно настроить border и padding. Эти два свойства расширяют базовые стили, описанные выше, чтобы сделать текстовые поля более удобными.

select {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  /* рамка и отступы */
  border: 0.1em solid;
  padding: 0 0.2em;
}

`border`

Изменение значений CSS-свойств для рамки поля сопряжено с риском. Согласно WCAG (SC 1.4.11: Non-text Contrast), если для элемента формы не вносить изменений в стили по умолчанию, то это никак не повлияет на контрастность. Тем не менее, с помощью border: 0.1em solid будет установлена толщина рамки на основе размера шрифта. Теперь рамка поля выбора будет масштабироваться вместе с текстом. Заодно она становится толще, чем используется по умолчанию в большинстве браузеров.

Здесь умышленно не установлен цвет рамки, чтобы позволить браузеру сделать это самостоятельно. Конечно, если фон страницы не белый, можно изменить цвет рамки.

`padding`

Трогать padding для select не обязательно. Однако, содержимое поля будет немного легче читать и использовать, если немного его настроить. Это поможет сделать отступы в select ближе к аналогичным в textarea и input, если их тоже предстоит настраивать.

Стилизация состояний `select`

Поля формы могут находиться в разных состояниях. Отключенное, сфокусированное, с ошибкой и обязательное — это наиболее распространенные состояния, которые можно применить к элементам управления. Не обязательно применять какие-либо из предлагаемых стилей, но можно использовать селекторы и логику, лежащие в их основе, чтобы реализовать состояния в собственной библиотеке шаблонов.

Отключено `disabled`

Отключенные поля исключаются из требований к контрастности WCAG, как и элементы управления интерфейса по умолчанию. Если ничего не делать, браузер самостоятельно сделает всё необходимое. Поэтому здесь не стоит что-то менять в настройках цвета фона поля или текста, достаточно позволить браузеру выполнить эту работу по его усмотрению.

Сфокусировано `focused`

WCAG SC 2.4.7 не рекомендует здесь ничего делать, согласно Technique G149, потому что браузер добавляет свой собственный стиль для фокуса. Тем не менее, можно сделать его ещё более очевидным, например, использовать синий контур с хорошим контрастом к белому и добавить тень:

select:focus {
  outline: 0.15em solid #00f;
  box-shadow: 0 0 0.2em #00f;
}

Только для чтения `readonly`

Нативный элемент <select> не поддерживает атрибут readonly.

Обязательное поле `required`

Пока label указывает, что поле обязательное (вместе с атрибутом required), нет большой необходимости стилизовать select как-то особенно. Но, например, можно увеличить обязательному полю толщину границы слева. В совокупности с оформлением других полей это может дать достаточно информации. Можно не менять цвет рамки, позволяя наследование (по умолчанию от стилей пользовательского агента).

select[required] {
  border-left-width: 0.3em;
}

Поле с ошибками

Одной красной рамки тут будет недостаточно (из-за сбоев WCAG по контрасту и только по цвету), а массивные тени могут испачкать всю страницу. Слишком много усилий по привлечению внимания к ошибкам создают шум, требующий от пользователей больших усилий для их устранения. Вместо этого можно добавить небольшой индикатор в углу поля. Градиент, образующий красную метку, устанавливает белый цвет фона поля. Обратите внимание, здесь в первый раз полю select явно задаётся цвет фона.

Здесь не будет использоваться селектор :invalid, потому что он может негативно влиять на нативное представление ошибок в браузере. Вместо этого можно использовать наличие-отсутствие aria-invalid, не просто переключая его с true на false, а добавляя или удаляя этот атрибут. Поскольку стрелка, как было решено выше, также является фоновым изображением, её здесь придётся повторно установить, если речь об обычном select без множественного выбора (multiple).

select[aria-invalid] {
  background: linear-gradient(
    135deg,
    rgba(255, 0, 0, 1) 0,
    rgba(255, 0, 0, 1) 0.4em,
    rgba(255, 255, 255, 0) 0.4em
  );
}

select[aria-invalid]:not([multiple]) {
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 0.25em) 0.35em;
  background-size: 0.85em auto;
  background-image: linear-gradient(
      135deg,
      rgba(255, 0, 0, 1) 0,
      rgba(255, 0, 0, 1) 0.4em,
      rgba(255, 255, 255, 0) 0.4em
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M70.3 13.8L40 66.3 9.7 13.8z' fill='%23000'%3E%3C/path%3E%3C/svg%3E");
}

Стили для интернационализации

Чтобы не сильно усложнять, здесь речь пойдёт только о стилях написания справа налево, а при необходимости, будет не трудно разобраться и адаптировать это.

Для нативного поля выбора select достаточно поправить только стили, которые написаны, исходя из ожиданий для языков с написанием слева направо, а именно: стрелка, индикаторы обязательности и ошибки, которые позиционируются в зависимости от того, с какой стороны пользователь начинает читать. Здесь достаточно переместить стрелку, красную метку и более толстую границу на противоположную сторону.

*[dir="rtl"] select:not([multiple]) {
  padding-right: 0.2em;
  padding-left: 1.2em;
  background-position: 0.25em 0.35em;
}

*[dir="rtl"] select[required] {
  border-left-width: 0.1em;
  border-right-width: 0.3em;
}

*[dir="rtl"] select[aria-invalid] {
  background: linear-gradient(
    225deg,
    rgba(255, 0, 0, 1) 0,
    rgba(255, 0, 0, 1) 0.4em,
    rgba(255, 255, 255, 0) 0.4em
  );
}

*[dir="rtl"] select[aria-invalid]:not([multiple]) {
  background: linear-gradient(
    225deg,
    rgba(255, 0, 0, 1) 0,
    rgba(255, 0, 0, 1) 0.4em,
    rgba(255, 255, 255, 0) 0.4em
  ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M70.3 13.8L40 66.3 9.7 13.8z' fill='%23000'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: auto, 0.85em auto;
  background-position: 0 0, 0.25em 0.35em;
}

Стили режима высокой контрастности Windows

Поскольку используются нативные элементы управления, нет вмешательства в цвета и стили для критически важных функций, которые отсутствуют в WHCM, т.е. в основном были применены системные стили — в этом направлении особо ничего делать не нужно.

Стиль подсветки контура outline здесь хорошо адаптируется. Переключение в disabled работает, как и должно по умолчанию. Стили border не затрагивают цвет и не повлияют работу с любой контрастностью.

Единственное, что может теряться — это индикация ошибки. При таком небольшом количестве цветов (система WHCM) может понадобиться акцент на другом визуальном индикаторе ошибок. Например, использовать label, чтобы четко указать на ошибки.

Стили для печати

Толщина границы масштабируется в зависимости от размера шрифта — это можно игнорировать. Пользователь, скорее всего, выберет размер шрифта, который будет разборчивым. Фоном отключенных полей и полей с ошибками можно управлять в настройках печати. Размер текста для поля не изменялся, наследуется. Здесь ничего не надо делать.

Стили для тёмного режима (dark mode)

Тёмный режим — это функциональный запрос, который нужно создать для поддержки стилей. Здесь не будет примера, а только рекомендации. Достаточно выбрать цвет фона и цвет шрифта и не писать все новые стили с нуля.

Следует наследовать цвет текста и фон (или сделать его прозрачным) и выбрать цвет рамки, который по-прежнему соответствует требованиям контрастности. Стили состояния при фокусировке тоже нуждаются в достаточном контрасте. Метка для состояния при ошибке зависит от фонового градиента к белому, поэтому нужно будет полностью переопределить стили ошибок, в том числе для RTL. Отключенные (disabled) поля также потребуют некоторой работы, так как явно заданы цвета границ и текста.

Заключение

Пример стилизованного select в разных состояниях с сохранением WCAG-доступности.

See this code Select Menus on x.xhtml.ru.

Когда речь идет о стилизации полей формы, нужно обратить внимание на минимальный набор стилей, который понадобится, чтобы обеспечить соответствие общему дизайну и поддержку состояний, которые перечислены выше.

Похожие публикации, посвященные стилизации HTML-элемента select: Select Like It’s 2019 и Custom Select Styles with Pure CSS немного отличаются подходами, но заслуживают не меньшего внимания. Может быть эти варианты даже лучше соответствуют вашим целям и требованиям.

Under-Engineered Select Menus.

Источник

От автора: современный CSS предоставляет нам ряд свойств для создания пользовательских стилей элемента select, которые имеют почти идентичный начальный вид для одиночных, множественных и отключенных элементов select в популярных браузерах.

Несколько свойств и методов, которые будет использовать наше решение:

clip-path для создания настраиваемой стрелки раскрывающегося списка

макет сетки CSS для выравнивания пользовательского поля выбора и стрелки

пользовательские переменные CSS для гибкого стиля

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

единицы em для относительных размеров

Распространенные проблемы с нативным select

Как и для всех типов полей формы, у select первоначальный вид в разных браузерах различается. Слева направо, вот исходный вид select в Firefox, Chrome и Safari:

Различия включают в себя размер поля, размер шрифта, высоту строки, и наиболее выдающейся является разница в стиле раскрывающегося индикатора. Наша цель — создать в этих браузерах одинаковый исходный вид, включая множественный выбор и отключенные состояния.

Примечание. Раскрывающийся список по-прежнему не стилизован, поэтому после select он все равно подберет для этого варианта список стилей отдельных браузеров . Это нормально — мы можем справиться с этим, чтобы сохранить доступность нативного select!

Базовый HTML

Для начала мы сосредоточимся на одиночном select.

<label for=«standard-select»>Standard Select</label>

<option value=«Option 1»>Option 1</option>

<option value=«Option 2»>Option 2</option>

<option value=«Option 3»>Option 3</option>

<option value=«Option 4»>Option 4</option>

<option value=«Option 5»>Option 5</option>

<option value=«Option length»>Option that has too long of a value to fit</option>

</select>

</div>

Метка не является частью нашего упражнения, но включена в общем требовании, в частности, с атрибутом for, имеющим значение свойства id для select.

Чтобы реализовать наши пользовательские стили, мы для простоты в этом руководстве заключили пользовательский select в дополнительный div с классом select.

Сбросить и удалить унаследованные стили

Как и во всех моих руководствах в качестве передовой современной практики, мы сначала добавляем следующий сброс:

*::before,

*::after {

box-sizing: border-box;

}

После этого мы можем начать правило для нативного select и применить следующее к его внешнему виду:

select {

// A reset of styles, including removing the default dropdown arrow

appearance: none;

// Additional resets for further consistency

background-color: transparent;

border: none;

padding: 0 1em 0 0;

margin: 0;

width: 100%;

font-family: inherit;

font-size: inherit;

cursor: inherit;

line-height: inherit;

}

Хотя большинство из этих стилей вам, вероятно, знакомы, странность заключается в appearance. Это редко используемое свойство, и вы заметите, что это не совсем то место, где мы хотели бы его поддерживать, но в этом случае оно в первую очередь обеспечивает нам удаление стрелки раскрывающегося списка.

Примечание: CodePen настроен на использование автопрефикса, который добавит необходимые предварительно фиксированные версии свойства appearance. Возможно, вам придется специально настроить это для своего проекта или добавить их вручную. Мой HTML / Sass Jumpstart включает автопрефиксатор, как часть производственной сборки.

Хорошая новость в том, что мы можем добавить еще одно правило, чтобы убрать стрелку для более ранних версий IE, если вам это нужно:

select::-ms-expand {

display: none;

}

Последняя часть — удалить значение по умолчанию outline. Не волнуйтесь — позже мы добавим ему замену для состояния :focus!

select {

// …existing styles

outline: none;

А вот гифка нашего прогресса. Вы можете видеть, что теперь нет визуальной индикации того, что это select до того, как кликнуть по нему:

Пользовательские стили поля выбора

Сначала давайте настроим некоторые переменные CSS. Это позволит гибко перекрашивать наш select, чтобы отображать состояние ошибки.

:root {

—select-border: #777;

—select-focus: blue;

—select-arrow: var(—select-border);

}

Примечание для специальных возможностей: как элемент пользовательского интерфейса выделенная граница должна иметь контраст 3:1 или выше по сравнению с цветом окружающего пространства.

Теперь пришло время создать стили select, которые мы применим к нашей оболочке div.select:

.select {

width: 100%;

min-width: 15ch;

max-width: 30ch;

border: 1px solid var(—select-border);

border-radius: 0.25em;

padding: 0.25em 0.5em;

font-size: 1.25rem;

cursor: pointer;

line-height: 1.1;

background-color: #fff;

background-image: linear-gradient(to top, #f9f9f9, #fff 33%);

}

Сначала мы устанавливаем некоторые ограничения по ширине. Значения min-width и max-width в основном предназначены для этой демонстрации, и вы можете отказаться от них или изменить их для своего варианта использования.

Затем мы применяем некоторые свойства блочной модели, в том числе border, border-radius и padding. Обратите внимание на использование единицы em, которая будет сохранять эти свойства пропорциональными набору font-size.

В сбросе стилей, мы установили для нескольких свойств inherit, так что здесь мы определяем их, в том числе font-size, cursor и line-height.

Наконец, мы предоставляем свойства фона, включая градиент для малейшего размера. Если вы удалите свойства фона, выделение станет прозрачным и сохранит фон страницы. Это может быть желательно, однако помните о влияние на контраст и проверяйте его. И вот наш прогресс:

Пользовательская стрелка раскрывающегося списка выбора

Для нашей стрелки раскрывающегося списка, мы будем использовать одно из самых интересных современных свойств CSS: clip-path.

Обрезка контуров позволяет нам создавать всевозможные формы, «обрезая» квадратные и прямоугольные фигуры, которые мы получаем по умолчанию от большинства элементов. Я получил удовольствие от использования clip-path при моем недавнем редизайне сайта-портфолио.

До получения лучшей поддержки clip-path альтернативные методы включали:

background-image — обычно в формате PNG, более современным будет SVG

встроенный SVG как дополнительный элемент

трюк границы, чтобы создать треугольник

SVG может показаться оптимальным решением, однако при использовании в background-image в качестве иконки он теряет способность действовать как иконка в том смысле, что не может изменять свои свойства, такие как цвет заливки, без его полного переопределения. Это означает, что мы не можем использовать переменную CSS.

Размещение встроенного SVG-файла решает проблему с цветом, однако это означает добавление еще одного элемента каждый раз, когда определяется select.

С помощью clip-path мы получаем четкую, масштабируемую «графику» стрелки, которая выглядит как SVG, но с преимуществами возможности использовать пользовательскую переменную и определения через стили вместо разметки HTML. Чтобы создать стрелку, мы определим ее как псевдо-элемент ::after.

.select::after {

content: «»;

width: 0.8em;

height: 0.5em;

background-color: var(—select-arrow);

clip-path: polygon(100% 0%, 0 0%, 50% 100%);

}

Если вы следите по тексту, возможно, вы заметили, что стрелка не отображается, несмотря на определение width и height. При осмотре было обнаружено, что для ::after ширина на самом деле не разрешена. Мы решим эту проблему, обновив .select макетом сетки CSS.

.select {

// …existing styles

display: grid;

}

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Это позволяет стрелке отображаться.

На этом этапе мы можем видеть, что у нас действительно есть треугольник. Чтобы исправить выравнивание, мы воспользуемся моим любимым приемом CSS-сетки. Старое решение CSS: position: absolute. Новое решение CSS: единая grid-template-areas, содержащая их все.

Сначала мы определим область, а затем определим, что и select, и ::after используют ее. Имя привязано к элементу, для которого он создан, и мы упростим все, назвав его «select»:

.select {

// …existing styles

grid-template-areas: «select»;

}

select,

.select:after {

grid-area: select;

}

Это дает нам перекрытие стрелкой пользовательского select из-за контекста стекирования:

Теперь мы можем использовать свойства сетки для завершения выравнивания каждого элемента:

.select {

// …existing styles

align-items: center;

}

.select:after {

// …existing styles

justify-self: end;

}

Состояние :focus

Ах да — помните, как мы удалили outline? Нам нужно исправить отсутствующее состояние :focus. В ближайшее время мы могли бы использовать свойство :focus-within, но все же на данный момент лучше включить для него полифилл.

В этом руководстве мы будем использовать альтернативный метод, который дает тот же результат, только немного посложнее. К сожалению, это означает, что нам нужно добавить в DOM еще один элемент. После пользовательского элемента select в качестве последнего дочернего элемента внутри .select добавьте:

Почему после? Поскольку, это решение на чистом CSS, размещение его после пользовательского select означает, что мы можем изменить его, когда select выделен фокусом, используя селектор — +. Это позволяет нам создать следующее правило:

select:focus + .focus {

position: absolute;

top: -1px;

left: -1px;

right: -1px;

bottom: -1px;

border: 2px solid var(—select-focus);

border-radius: inherit;

}

Вам может быть интересно, почему мы вернулись к position: absolute после того, как только что изучили прием grid-area. Причина в том, что мы хотим избежать пересчета корректировок на основе заполнения. Если вы попробуете это самостоятельно, то увидите, что даже указание для width и height 100% все равно заставляет его находиться внутри отступа.

position: absolute работает лучше. Мы растягиваем лишний пиксель в каждом направлении, чтобы убедиться, что он перекрывает границу.

Но нам нужно сделать еще одно добавление, чтобы обеспечить, что .select связано с нашим select… ну, через position: relative.

.select {

// …existing styles

position: relative;

И вот как отображается в Chrome наш пользовательский select:

Множественный выбор

Элемент выбора имеет второй вариант, который позволяет пользователю выбрать более одной опции. С точки зрения HTML это просто означает добавление атрибута multiple, но мы также добавим класс, который поможет создавать настройки стиля, select—multiple:

<label for=«multi-select»>Multiple Select</label>

<option value=«Option 1»>Option 1</option>

<option value=«Option 2»>Option 2</option>

<option value=«Option 3»>Option 3</option>

<option value=«Option 4»>Option 4</option>

<option value=«Option 5»>Option 5</option>

<option value=«Option length»>Option that has too long of a value to fit</option>

</select>

</div>

И глядя на него, мы видим, что он унаследовал большинство наших стилей, за исключением того, что нам не нужна стрелка в этом представлении.

Это можно быстро исправить. Мы используем :not(), чтобы исключить наш недавно определенный класс:

.select:not(.select—multiple)::after

У нас есть пара незначительных корректировок для множественного выбора, первая — это удаление отступов, которые были добавлены ранее, чтобы освободить место для стрелки:

select[multiple] {

padding-right: 0;

}

По умолчанию опции с длинным значением будут выходить за пределы видимой области и будут обрезаны, но я обнаружил, что основные браузеры позволяют переопределить перенос, если вы хотите:

select[multiple] option {

white-space: normal;

}

Опционально мы можем установить для select свойство height, чтобы обеспечить более надежное кроссбраузерное поведение. В ходе тестирования я узнал, что Chrome и Firefox отображают опцию частично, но Safari полностью скроет опцию, которая не может быть отображена полностью.

Высота должна быть установлена непосредственно для пользовательского select. Учитывая другие стили, значение 6rem должно подойти для отображения 3 опций:

select[multiple] {

// …existing styles

height: 6rem;

}

На данный момент, из-за текущей поддержки браузеров, мы внесли столько корректировок, сколько смогли. Состояние :selected из options довольно хорошо настраивается в Chrome, частично в Firefox, и совсем не настраивается в Safari.

Стили :disabled

Хотя я бы выступала за то, чтобы просто не отображать отключенные элементы управления, мы должны подготовить стили для этого состояния, чтобы охватить все.

Чтобы выделить отключенное состояние, нам нужно применить серый фон. Но поскольку мы установили стили фона .select, и селектора :parent нет, нам нужно создать последний класс для обработки этого состояния:

.select—disabled {

cursor: not-allowed;

background-color: #eee;

background-image: linear-gradient(to top, #ddd, #eee 33%);

}

Здесь мы обновили курсор как дополнительную подсказку о том, что с полем нельзя взаимодействовать, и обновили значения для фона, которые мы ранее установили, как белый, теперь они более серые для отключенного состояния. Это дает нам:

Демо

Вы можете проверить это сами, но вот предварительный просмотр полного решения (слева направо) в Firefox, Chrome и Safari:

Автор: Stephanie Eckles

Источник: //moderncss.dev

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Источник

HTML тег <select> используется для определения выпадающего списка, который появляется при нажатии мышью на элемент формы и позволяет пользователю выбрать один из вариантов.

Для определения доступных вариантов выбора используется тег <option>, вложенный в тег <select>.

По умолчанию первый пункт в списке отображается как выбранный. Для изменения предопределенного варианта используется атрибут selected.

Для объединения нескольких вариантов в одну группу используется тег <optgroup>. Содержимое тега <optgroup> выглядит как заголовок жирного начертания.

Внешний вид списка зависит от использования атрибута size, который устанавливает высоту списка. Ширина списка зависит от длины текста в теге <option>. Ширину можно также задать с помощью CSS стилей.

Если необходимо отправлять данные на сервер, либо обращаться к списку через скрипты, то тег <select> необходимо поместить внутрь формы (тег <form>).

Содержимое элемента заключается между открывающим (<select>) и закрывающим (</select>) тегами. Закрывающий тег обязателен

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <form action="action_form.php" target="_top">
      <select>
        <option value="books">Книги</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
    </form>
  </body>
</html>

Результат

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <select>
      <optgroup label="Книги">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
      </optgroup>
      <optgroup label="Сниппеты">
        <option value="git">Git</option>
        <option value="java">Java</option>
      </optgroup>
    </select>
  </body>
</html>

В этом примере мы использовали тег <optgroup> для сбора опций в группе.

Результат

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Аэропорт вылета:</p>
    <form action="action_form.php" target="_top">
      <input type = "text" list = "airports" name="airports"> 
      <datalist id = "airports">
        <option value = "Санкт-Петербург">
        <option value = "Краснодар">
        <option value = "Москва">
        <option value = "Новосибирск">
      </datalist>
      <input type = "submit" value = "подтвердить">
    </form>
  </body>
</html>

Результат

В этом примере мы использовали тег <form>, так как нам необходимо отправить данные на сервер.

Тег <select> поддерживает также глобальные атрибуты и атрибуты событий.

Источник

Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности и универсальности, список может занимать одну или несколько строк, в нём можно выбирать одно или несколько значений. Поле со списком создается следующим образом.

<select атрибуты>
  <option атрибуты>Пункт 1</option>
  <option атрибуты>Пункт 2</option> 
</select>

Тег <select> выступает контейнером для пунктов списка и определяет его вид, будет ли это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка, ширина списка при этом определяется автоматически исходя из длины текста внутри <option>. Ниже представлен список множественного выбора, в котором пункты выделяются с помощью клавиши Ctrl и Shift и раскрывающийся список.


Список множественного выбора	Раскрывающийся список

Атрибуты тега <select>

Рассмотрим атрибуты тега <select>, с помощью которых можно изменять представление списка.

multiple

Наличие multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки.


Атрибут size отсутствует	Атрибут size равен 2

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

В примере 1 показано создание списка множественного выбора.

Пример 1. Список множественного выбора

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="select" size="3" multiple>
    <option selected value="s1">Чебурашка</option>
    <option value="s2">Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s4">Крыса Лариса</option>
   </select>
   <input type="submit" value="Отправить"></p> 
  </form>
 </body>
</html>

name

Определяет уникальное имя элемента <select>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.

size

Устанавливает высоту списка. Если значение size равно единице, то список превращается в раскрывающийся. Значение по умолчанию зависит от атрибута multiple. Если он присутствует, то размер списка равен числу элементов. Когда multiple нет, то значение атрибута size равно 1.

Атрибуты тега <OPTION>

Тег <option> также имеет атрибуты, влияющие на вид списка, они представлены далее.

selected

Делает текущий пункт списка выделенным. Если у тега <select> добавлен атрибут multiple, то можно выделять более одного пункта.

value

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задаётся атрибутом name тега <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.

label

Предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри тега <option> игнорируется и в списке выводится значение label. Браузер Firefox не поддерживает этот атрибут.

Создание списка показано в примере 2.

Пример 2. Использование списка

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><strong>Выбери персонажа</strong></p>
   <p><select name="hero">
    <option value="s1">Чебурашка</option>
    <option value="s2" selected>Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s3" label="Лариса">Крыса Лариса</option>
   </select> 
   <input type="submit" value="Отправить"></p>
  </form> 
 </body>
</html>

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег <optgroup>. Он представляет собой контейнер, внутри которого располагаются теги <option> объединённые в одну группу. Особенностью тега <optgroup> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label, как показано в примере 3.

Пример 3. Группирование элементов списка

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="food">
    <optgroup label="Русская кухня">
     <option value="r1">Закуска Барская</option>
     <option value="r2">Раки, фаршированные по-царски</option>
     <option value="r3">Биточки в горшочке</option>
    </optgroup>
    <optgroup label="Украинская кухня">
     <option value="u1">Галушки славянские</option>
     <option value="u2">Пампушки украинские</option>
     <option value="u3">Жаркое по-харьковски</option>
    </optgroup>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Группированный список

Источник

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Pure CSS Styled Select</title>

<style>

body {

background-color: #a4ecae;

font-family: 'Source Sans Pro', sans-serif;

}

.demo {

margin: 100px auto;

}

.dropdown-container {

width: 250px;

margin: 100px auto;

position: relative;

}

select {

width: 100%;

height: 50px;

font-size: 100%;

font-weight: bold;

cursor: pointer;

border-radius: 0;

background-color: #2bd325;

border: none;

border-bottom: 2px solid #37c40c;

color: white;

appearance: none;

padding: 10px;

padding-right: 38px;

-webkit-appearance: none;

-moz-appearance: none;

transition: color 0.3s ease, background-color 0.3s ease,

border-bottom-color 0.3s ease;

}

/* For IE <= 11 */

select::-ms-expand {

display: none;

}

.select-icon {

position: absolute;

top: 4px;

right: 4px;

width: 30px;

height: 36px;

pointer-events: none;

border: 2px solid #70d82a;

padding-left: 5px;

transition: background-color 0.3s ease, border-color 0.3s ease;

}

.select-icon svg.icon {

transition: fill 0.3s ease;

fill: white;

}

select:hover,

select:focus {

color: #5ac02b;

background-color: white;

border-bottom-color: #141313;

}

select:hover ~ .select-icon,

select:focus ~ .select-icon {

background-color: white;

border-color: #3dd13db6;

}

select:hover ~ .select-icon svg.icon,

select:focus ~ .select-icon svg.icon {

fill: #67c02b;

}

</style>

</head>

<body>

<div class="demo">

<div class="dropdown-container">

<select class="slct">

<option value="1">GFG</option>

<option value="2">OS

</option>

<option value="3">DBMS</option>

<option value="4">

Data Structure

</option>

</select>

<div class="select-icon">

<svg focusable="false" viewBox="0 0 104 128"

width="25" height="35" class="icon">

<path

d="m2e1 95a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9

0 0 1 9 -9 9 9 0 0 1 9 9zm0-3e1a9 9 0 0 1

-9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0

1 9 9zm0-3e1a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9

9 0 0 1 9 -9 9 9 0 0 1 9 9zm14

55h68v1e1h-68zm0-3e1h68v1e1h-68zm0-3e1h68v1e1h-68z">

</path>

</svg>

</div>

</body>

Источник

Try it

Attributes

Usage notes

Selecting multiple options

Styling with CSS

Examples

Basic select

Advanced select with multiple features

Customizing select styles

HTML

CSS

JavaScript

Result

Technical summary

Specifications

Browser compatibility

See also

All together:

Основные стили

font

letter-spacing

word-spacing

line-height

Пример

Как настроить стрелку для select

Продолжение настройки select

border

padding

Стилизация состояний select

Отключено disabled

Сфокусировано focused

Только для чтения readonly

Обязательное поле required

Поле с ошибками

Стили для интернационализации

Стили режима высокой контрастности Windows

Стили для печати

Стили для тёмного режима (dark mode)

Заключение

Распространенные проблемы с нативным select

Базовый HTML

Сбросить и удалить унаследованные стили

Пользовательские стили поля выбора

Пользовательская стрелка раскрывающегося списка выбора

Состояние :focus

Множественный выбор

Стили :disabled

Демо

PSD to HTML

Пример

Результат

Пример

Результат

Пример

Результат

Атрибуты тега <select>

multiple

name

size

Атрибуты тега <OPTION>

selected

value

label

Группирование элементов списка

`font`

`letter-spacing`

`word-spacing`

`line-height`

Как настроить стрелку для `select`

Продолжение настройки `select`

`border`

`padding`

Стилизация состояний `select`

Отключено `disabled`

Сфокусировано `focused`

Только для чтения `readonly`

Обязательное поле `required`