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 に答える