html - <select> 是否有正确的 :active selector?

Question

我的选择框后面有一个向上的箭头，就像这样

.select-pokemon:after {
    content: "^";
}

但是，当选择框显示其选项并被选中时，我希望箭头显示一个 (x) 图标。我试过了

.select-pokemon:active:after {
     content: "x";
}

但这只会在我直接点击选择框时发生变化，当我停止点击但选项仍然显示时，内容会变回“^”有没有办法在保持图标“x”的同时选择框显示其所有选项？

Answer 1

你应该使用 :focus。

.select-pokemon:focus:after {
     content: "x";
}

这应该可以解决问题。