Question

我正试图以html形式显示选择框的聚焦状态。当我浏览表单的元素时，几乎所有input type="text"个元素，焦点都按照我在css中指定的方式工作，但是当标签焦点到达select框时，就没有' t 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

看起来您可以在最后使用此块覆盖选择焦点样式：

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部分之前错过了一个逗号，这可能会导致问题。

Answer 2

我发现了问题 - 问题出在生成的tabIndex上包含select的div。我在select2.js中修改了以下代码：

createContainer: function () {


    var container = $(document.createElement("div")).attr({
                "class": "select2-container",
                "tabIndex": "0"
            }).html([
                "<a href='javascript:void(0)' onclick='return false;' class='select2-choice' tabindex='-1'>",
                "   <span class='select2-chosen'>&nbsp;</span><abbr class='select2-search-choice-close'></abbr>",
                "   <span class='select2-arrow'><b></b></span>",
                "</a>",
                "<input class='select2-focusser select2-offscreen' type='text' tabindex='-1'/>",
                "<div class='select2-drop select2-display-none'>",
                "   <div class='select2-search'>",
                "       <input type='text' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' class='select2-input'/>",
                "   </div>",
                "   <ul class='select2-results'>",
                "   </ul>",
                "</div>"].join(""));

            return container;
        },

并将tabIndex添加到容器的属性中。

希望这有助于其他人！

选中框上的tabfocus

2 个答案: