CSS 是否可以單獨根據所選元素設定所選元素的樣式？

將樣式應用到基於所選選項的元素：純CSS 方法

傳統上，樣式化

基於所選選項的元素依賴JavaScript 解決方案。然而，有了 CSS，我們現在可以純粹透過 CSS 來實現這種效果。

挑戰：設定選項元素的樣式

嘗試設定 的樣式元素僅直接影響其在選項清單中的外觀，而不會影響所選元素。

select[name="qa_contact"] option[value="3"] {
背景：橘色;
}

解決方案：利用onchange事件

使元素知道所選選項，我們可以在onchange事件中為 data-chosen 屬性指派一個值。

現在，我們可以定位和設定樣式基於分配給data-chosen 屬性的值的元素。

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

透過使用這種方法，我們成功地將樣式方法應用到 中。僅使用 CSS 基於所選選項的元素。

未來CSS 增強功能：主題選擇器

雖然目前無法設定 樣式基於CSS 3 所選選項的元素，CSS 4 中的主題選擇器等更新可能會在未來引入此功能。不過，該功能是否會成為現實仍不確定。

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