:open
语法
:open {
/* ... */
}
描述
:open 伪类选择任何当前处于打开状态的元素，其中包括以下元素：
- 处于打开状态的
<details>和<dialog>元素，即它们设置了open属性。 - 当选择器界面显示时，显示用于用户选择值的选择器界面的
<input>元素（例如<input type="color">）。 - 当选择器显示时，显示下拉选择器供用户选择值的
<select>元素。请注意，当实现可自定义的选择元素时，选择器本身可以使用::picker(select)伪元素进行选择。
请注意，打开和关闭状态是语义状态，不一定与所讨论元素的可见性相关。例如，展开以显示其内容的 <details> 元素是打开的，并且将被 details:open 选择器选中，即使它被 visibility 值为 hidden 隐藏。
弹出式元素（即设置了 popover 属性的元素）具有表示显示或隐藏弹出式窗口的不同语义状态，这些状态可以与打开和关闭状态共存。要定位处于显示状态的弹出式元素，请改用 :popover-open 伪类。
示例
:open 基本用法
此示例演示了一些具有打开状态的 HTML 元素。
CSS
details:open > summary {
background-color: pink;
}
:is(select, input):open {
background-color: pink;
}
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" />
结果
使用 :open 进行自定义 <select> 样式
在此示例中，我们为基本的 <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>
注意：我们没有使用多行 <select>（即设置了 multiple 属性的元素）——这些元素通常会渲染为滚动列表框而不是下拉菜单，因此没有打开状态。
CSS
在 CSS 中，我们将 <select> 元素的 appearance 值设置为 none，以移除选择框的默认操作系统样式，并提供一些我们自己的基本样式。最值得注意的是，我们在右侧设置了一个向下箭头的 SVG 背景图像——用户通常通过向下箭头识别 <select> 元素，因此包含它是一个好主意。
然后，我们为周围的 <label> 元素设置一些 padding 和一个透明边框，以便在我们稍后添加彩色边框时保持布局一致。
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 伪类设置不同的背景颜色并将背景图像更改为向上箭头。我们还使用 :open 和 :has() 伪类的组合，为包含的 <label> 元素设置不同的背景颜色和边框，以创建父选择器。我们实际上是说“选择 <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> 下拉菜单以查看对样式的影响
规范
| 规范 |
|---|
| HTML # selector-open |
| 选择器 Level 4 # selectordef-open |
浏览器兼容性
加载中…