我可以只使用 CSS 根據所選選項設定所選元素的樣式嗎？

樣式基於所選

您可以設計 的元素嗎？基於所選的元素僅使用 CSS？

儘管普遍認為，確實可以設計 的樣式。基於目前選擇的 元素純粹使用CSS。

禁果？不再是了。

傳統上，將 樣式設定為單獨的元素只會修改下拉清單中選項的外觀，而不是 。元素本身。然而，CSS 的現代進步引入了新的可能性。

輸入 :has() 偽類。

在同時支援:has 的瀏覽器中() 的偽類和樣式；元素，您可以利用以下程式碼：

select:has(option[selected][value="3"]) {
  background: orange;
}

此程式碼會將橙色背景應用於 元素。當 時的元素

但等等，還有更多！

CSS 也允許您將 設為「3」。元素透過 onchange 事件回應所選選項的變更。透過設定的data-chosen屬性

<select onchange="this.dataset.chosen = this.value;">
  ...
</select>

select[data-chosen='opt3'] { 
    border: 2px solid red;
}

透過這種方法，您可以完全控制 元素的外觀。基於所選的元素及其價值，實現廣泛的客製化可能性。

以上是我可以只使用 CSS 根據所選選項設定所選元素的樣式嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！