tabfocus on select box

Question

Я пытаюсь показать сфокусированное состояние окна выбора в форме 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.

Кто-нибудь знает, почему поля выбора не получают стиль фокусировки, который получают другие элементы?

Answer 1

Я понял, проблема: проблема была с 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 атрибутам контейнера.

Надеюсь, это поможет кому-то еще!

Answer 2

Похоже, вы могли бы быть отменяя выбор стиля фокусировки с этим блоком в конце:

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

Вы также, кажется, не хватает запятую перед избранным: фокусом части так или иначе, которые могут быть причиной проблем.