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

設計 的樣式基於選定的

樣式化 的元素基於所選的元素長期以來，純CSS 似乎是不可能的。儘管能夠設定 的樣式直接元素，變更僅適用於清單中的選項，而不適用於所選選項。

JavaScript 解決方案提供了解決方法，但 CSS 真的能滿足這項要求嗎？

「Hold My Beer」解決方案

第1步：更新元素的值

使用onchange 事件將所選值指派給 上的自訂資料屬性。元素。例如：

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

第2 步：目標和樣式

將所選值儲存在資料屬性中後，您現在可以將 定位為使用CSS 選擇器的元素：

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

相關實例，請查看此CodePen：https://codepen.io/Aprillion/pen/xxx

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