CSS 可以根據選擇的選項來設定選擇元素的樣式嗎？

設定所選元素的樣式：CSS 可以根據所選選項設定選擇樣式嗎？

是否可以自訂所選元素的外觀是基於目前選擇的選項？儘管有 JavaScript 解決方案，這個問題還是經常出現。

挑戰不可能

設定 的樣式正如您所嘗試的，元素本身會在選項清單中出現時修改其外觀，但在選擇時不會修改。由於目前的技術限制，僅 CSS 無法直接定位所選元素。

主題選擇器可以拯救？

CSS 4 提議的主題選擇器可能在未來提供潛力。然而，截至目前，此功能仍然不可用。

:has 偽類

雖然:has 偽類可以部分提供幫助，但僅限於樣式僅當最初明確選擇該選項時，才會基於HTML 屬性進行選擇。當使用者更改選擇時，它的限制就會變得明顯，這會修改 DOM 屬性而不影響 CSS 依賴的 HTML 屬性。

僅 CSS 的解決方案

儘管CSS 的局限性，有一個聰明的解決方案。透過在 onchange 事件中引入帶有值分配的 data-chosen 屬性，我們可以使 select 元素了解目前選項。這為 CSS 根據所選選項進行定位和設定樣式創造了機會。

這個優雅的解決方案使 CSS 能夠根據所選選項自訂選擇元素的外觀，而無需 JavaScript。

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