<select> 元素的纯 CSS 样式，但仅在选择非默认选项时[重复]

Posted 2023-05-07

【中文标题】<select> 元素的纯 CSS 样式，但仅在选择非默认选项时[重复]

【英文标题】：Pure CSS styling of <select> element but only when non-default option is selected [duplicate]

【发布时间】：2020-05-29 23:18:38

【问题描述】：

是否可以有条件地设置以下<select> 元素的样式

<select>
  <option>one</option>
  <option selected>default</option>
  <option>two</option>
</select>

无论何时选择非默认选项，使用纯 CSS（无 javascript）？

如果有办法，我希望它使用pseudo-classes 的某种组合，类似于

select:some-pseudo-class  border: 1px; 

但可能更复杂。我已经浏览了list of pseudo-classes，这似乎是不可能的，但我想在完全放弃之前用群众的智慧来确认这一点。我也在这个网站上做了一些研究，从 2013 年开始遇到this question，这是一个更普遍的问题，其中（可能过时的）答案是“否”。我不相信我的问题与这个问题完全相同，因为我在问是否有可能出现特殊情况，并且我正在寻找截至 2020 年 2 月的最新答案。

【问题讨论】：

仅供参考，父选择器无法使用 css。您需要使用 javascript 或 jquery

【参考方案1】：

你可以试试伪类option:checked border: 1px;

【讨论】：

那不会只为选定的选项元素设置样式吗？我正在尝试设置选择元素（即父元素）的样式