html - 有没有办法在 css 中选择一个打开的选择框？

Question

在将 webkit-appearance 属性设置为 none 后，我将背景图像(向下箭头)设置为选择框。打开选项列表时，我想显示另一个背景图像(向上箭头)。是否有伪类或其他东西？我在研究期间找不到任何东西......

Answer 1

您可以使用 :focus 伪类。

但这将指示“打开”状态，当 <select> 时也是如此通过选项卡选择或刚刚选择了一个元素。为了避免这种情况，您可以使用类似 select:hover:focus 的东西但这相当丑陋，不是可靠的解决方案。

select:focus {
  background-color: blue;
  color: white;
}

<select>
  <option>Click me</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>