css - 更改焦点选择框选项的背景颜色不起作用

Question

这是专门与 selectBoxIt jQuery 插件，使用 jQueryUI 主题。

我为悬停动作设置了这个：

/* Individual Option Hover Action */
.selectboxit-option .selectboxit-option-anchor:hover {
  color: #ffffff;
  background-color: #ff0000;
  text-decoration: none;
}

这很好用。当我将鼠标悬停在选项上时，我会看到带有白色文本的红色背景。

但是，当我这样做时...

.selectboxit-option:focus .selectboxit-option-anchor:focus  {
  color: #ffffff;
  background-color: #ff0000;
  text-decoration: none;
}

...没有什么变化。

我看到 selectBoxIt 的主网页上的所有演示都通过键盘焦点改变了背景颜色......所以我错过了什么？

Answer 1

从技术上讲，每个选项都不使用焦点事件，这就是焦点伪选择器不适合您的原因。对于 jQueryUI 主题，“active”选项添加了 ui-state-focus 类，因此要更改“focus” CSS 样式，您可以有这样的规则：

.selectboxit-option.ui-state-focus {
  background: #CCC;
}