jquery - tabfocus 在选择框上

Question

我试图在 html 表单中显示选择框的聚焦​​状态。当我通过表单的元素(几乎都是 input type="text" 元素)切换时，焦点按照我在 css 中指定的方式工作，但是当选项卡焦点到达 select 框，没有视觉指示表明 select 框是焦点，但如果我再次点击 Tab，焦点将移动到下一个元素。

下面是我使用的 less 代码:

input,
textarea {
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  @transition: border linear .2s, box-shadow linear .2s;
  .transition(@transition);
}
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(82,168,236,.8);
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
  .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
}
input.warning:focus,
textarea:focus {
  border-color: @redMid;
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
  .box-shadow(~"inset 0 0px 0px rgba(0,0,0,.075), 0 0 0px rgba(82,168,236,.6)");
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus
select:focus {
  .tab-focus();
  .box-shadow(none); // override for file inputs
}

此外，我正在使用来自 Igor Vaynberg 的自定义选择框.

有谁知道为什么选择框没有获得其他元素获得的焦点样式？

Answer 1

看起来你可以在最后用这个 block 覆盖选择焦点样式:

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus
select:focus {
 .tab-focus();
 .box-shadow(none); // override for file inputs
}

无论如何，您似乎还缺少 select:focus 部分之前的逗号，这可能会导致问题。