CSS 可以根据所选元素设置 `` 元素的样式吗？

设计 的样式基于选定的

样式化 的元素基于所选的元素长期以来，纯 CSS 似乎是不可能的。尽管能够设置 的样式直接元素，更改仅适用于列表中的选项，而不适用于所选选项。

JavaScript 解决方案提供了解决方法，但 CSS 真的能满足这一要求吗？

“Hold My Beer”解决方案

第1步：更新元素的值

使用 onchange 事件将所选值分配给 上的自定义数据属性。元素。例如：

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

第 2 步：目标和样式

将所选值存储在数据属性中后，您现在可以将 定位为使用 CSS 选择器的元素：

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

有关实例，请查看此 CodePen：https://codepen.io/Aprillion/pen/xxx

以上是CSS 可以根据所选元素设置 `` 元素的样式吗？的详细内容。更多信息请关注PHP中文网其他相关文章！