有没有办法在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>

Answer 2

无法检测是否使用CSS，甚至是javascript打开了HTML select元素。

如果您希望自定义自定义下拉列表的箭头符号，最佳选择是使用自定义下拉组件，该组件映射到隐藏的select元素。