扩展选择（下拉）元素的 CSS 选择器

Posted 2023-03-06

【中文标题】扩展选择（下拉）元素的 CSS 选择器

【英文标题】：CSS selector for expanded select (dropdown) element

【发布时间】：2015-10-13 22:41:10

【问题描述】：

如何在下拉菜单打开或关闭时设置不同的样式？是否有任何伪选择器或技巧？ 当然没有javascript。

<select>
  <option> op1 </option>
  <option> op2 </option>
</select>

and :hover 并不真正适合我的需要，因为当下拉菜单展开时，我可以将光标移开。它仍然处于打开状态，但 :hover 样式不再适用。

【问题讨论】：

可能重复：***.com/questions/7208786/…

@Wavemaster 我一般不要求下拉（选择）的样式，但前提是存在“打开状态”的选择器！

那么答案很简单：否。没有 JavaScript，就没有“打开状态”选择器。而且我不确定js是否有办法。

【参考方案1】：

您在寻找:hover 吗？

这是一个元素的状态，如果鼠标在它上面。

a 
  color: blue;

a:hover 
  color: red;
  text-decoration: overline;

<a href="#">Move the mouse over me</a>

【讨论】：

没有。当它展开时。例如我有 something 当我点击一个下拉菜单时，它会展开，然后我可以将光标移开，它仍然会展开。我希望样式仍然存在。然后当我再次点击它并折叠时，应该再次反转样式。

你应该在你的问题中写下来。您还应该提供您已经尝试过的代码。