: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 |
瀏覽器相容性
載入中…