0

我试图在html表单中显示选择框的焦点状态。当我浏览几乎所有input type="text"元素的表单的元素时，焦点正如我在CSS中指定的工作，但是当焦点焦点到达select框时，没有视觉表明select盒子是焦点，但如果我再次点击标签，焦点将移至下一个元素。

下面是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的自定义选择框。

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

4

2 回答 2

0

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

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 部分之前也缺少逗号，这可能会导致问题。

于 2013-08-14T16:01:46.300 回答
0

我发现了问题 - 问题出在包含选择tabIndex的生成上。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到容器的属性中。

希望这对其他人有帮助！

于 2013-08-15T17:13:45.580 回答