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

Question

这是使用jQueryUI主题的selectBoxIt jQuery插件。

我已将此设置为悬停操作：

/* 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类，因此要更改“焦点”CSS样式，您可以使用如下规则：

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