Псевдокласс CSS `:open`

:open — это CSS-псевдокласс, который представляет элемент с открытым и закрытым состояниями, но только когда он находится в открытом состоянии.

Синтаксис

:open {
  /* ... */
}

Описание

Псевдокласс :open выбирает любой элемент, который в данный момент находится в открытом состоянии. К таким элементам относятся:

• элементы <details> и <dialog>, находящиеся в открытом состоянии, то есть элементы, у которых установлен атрибут open. Для выбора таких элементов также можно использовать селектор атрибута: details[open].
• элементы <input>, которые отображают средство выбора, позволяющее пользователю выбрать значение (например, <input type="color">), когда средство выбора открыто.
• элементы <select>, которые отображают раскрывающееся средство выбора значения для пользователя, когда оно открыто. Обратите внимание: при создании настраиваемых элементов select само средство выбора можно выбрать с помощью псевдоэлемента ::picker(select).

Обратите внимание: открытое и закрытое состояния — это семантические состояния, и они не обязательно связаны с видимостью соответствующего элемента. Например, элемент <details>, раскрытый для отображения своего содержимого, находится в открытом состоянии и будет выбран селектором details:open, даже если он скрыт с помощью значения hidden свойства visibility.

Элементы popover (то есть элементы, у которых установлен атрибут popover) имеют отдельные семантические состояния, обозначающие отображение или скрытие всплывающих окон. Они могут существовать одновременно с открытым и закрытым состояниями. Чтобы выбрать элемент popover в отображаемом состоянии, используйте псевдокласс :popover-open.

Примеры

Основы использования :open

В этом примере показаны некоторые HTML-элементы, имеющие открытое состояние.

CSS

details:open > summary {
  background-color: pink;
}

:is(select, input):open {
  background-color: pink;
}

@supports not selector(:open) {
  body::before {
    content: "Your browser doesn't support the :open selector.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

HTML

<details>
  <summary>Details</summary>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pulvinar dapibus
  lacus, sit amet finibus lectus mollis eu. Nullam quis orci dictum, porta lacus
  et, cursus nunc. Aenean pulvinar imperdiet neque fermentum facilisis. Nulla
  facilisi. Curabitur vitae sapien ut nunc pulvinar semper vitae vitae nisi.
</details>
<hr />

<label for="pet-select">Choose a pet:</label>
<select id="pet-select">
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
</select>
<hr />

<label for="start">Start date:</label>
<input type="date" id="start" />

Результат

Настройка стилей <select> с помощью :open

В этом примере мы добавим базовые пользовательские стили элементу <select>. Псевдокласс :open используется для улучшения оформления элемента в открытом состоянии — когда отображается раскрывающееся меню.

HTML

В нашем списке фруктов нет ничего необычного.

<label>
  Choose your favorite fruit:
  <select name="fruit">
    <option>apple</option>
    <option>banana</option>
    <option>boysenberry</option>
    <option>cranberry</option>
    <option>fig</option>
    <option>grapefruit</option>
    <option>lemon</option>
    <option>orange</option>
    <option>papaya</option>
    <option>pomegranate</option>
    <option>tomato</option>
  </select>
</label>

CSS

В CSS мы задаём значение none свойства appearance для элемента <select>, чтобы убрать стандартные стили операционной системы для поля выбора и задать собственные базовые стили. В частности, мы задаём фоновое изображение SVG со стрелкой вниз справа: пользователи обычно распознают элементы <select> по стрелке вниз, поэтому стоит добавить её.

Затем мы задаём padding окружающему элементу <label> и прозрачную рамку, чтобы сохранить единообразие макета, когда позднее мы добавим к нему цветную рамку.

select {
  appearance: none;
  width: 100%;
  display: block;
  font-family: inherit;
  font-size: 100%;
  padding: 5px;
  border: 1px solid black;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='5,5 15,5 10,15'/%3E%3C/svg%3E")
    no-repeat right 3px center / 1em 1em;
}

label {
  font-family: sans-serif;
  max-width: 20em;
  display: block;
  padding: 20px;
  border: 2px solid transparent;
}

Когда элемент <select> открывается, мы используем псевдокласс :open, чтобы изменить цвет фона и заменить фоновое изображение стрелкой вверх. Мы также задаём другой цвет фона и рамку внешнему элементу <label>, используя сочетание псевдокласса :open и псевдокласса :has(), чтобы создать родительский селектор. Буквально мы говорим: «выбрать элемент <label>, но только если его дочерний элемент <select> открыт».

select:open {
  background-color: #f8f2dc;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='5,15 10,5 15,15'/%3E%3C/svg%3E");
}

label:has(select:open) {
  background-color: #81adc8;
  border-color: #cd4631;
}

Результат

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

Спецификации

Совместимость с браузерами

См. также

• элементы <details>, <dialog>, <select> и <input>
• псевдокласс :popover-open
• :modal