CSS 可以根据选择的选项来设置选择元素的样式吗？

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

是否可以自定义所选元素的外观基于当前选择的选项？尽管有 JavaScript 解决方案，这个问题还是经常出现。

挑战不可能

设置 的样式正如您所尝试的，元素本身会在选项列表中出现时修改其外观，但在选择时不会修改。由于当前的技术限制，仅 CSS 无法直接定位所选元素。

主题选择器可以拯救？

CSS 4 提议的主题选择器可能在未来提供潜力。然而，截至目前，此功能仍然不可用。

:has 伪类

虽然 :has 伪类可以部分提供帮助，但仅限于样式仅当最初明确选择该选项时，才会基于 HTML 属性进行选择。当用户更改选择时，它的局限性就会变得明显，这会修改 DOM 属性而不影响 CSS 依赖的 HTML 属性。

仅 CSS 的解决方案

尽管CSS 的局限性，有一个聪明的解决方案。通过在 onchange 事件中引入带有值分配的 data-chosen 属性，我们可以使 select 元素了解当前选项。这为 CSS 根据所选选项进行定位和设置样式创造了机会。

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

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

这个优雅的解决方案使 CSS 能够根据所选选项自定义选择元素的外观，而无需 JavaScript。

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