선택 상자의 tabfocus

html 양식의 선택 상자에 초점을 맞춘 상태를 표시하려고합니다. 거의 모든 input type="text" 요소 인 양식의 요소를 탭할 때 CSS에서 지정한대로 포커스가 작동하지만 탭 포커스가 select 상자에 도착하면 select 상자가 시각적으로 표시되지 않습니다. 포커스이지만, 다시 탭을 누르면 포커스가 다음 요소로 이동합니다. 또한선택 상자의 tabfocus

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에서 상자를 선택하여 사용하고 있습니다 :

다음은 내가 사용하고있어 less 코드입니다.

선택 상자가 다른 요소가 가져 오는 포커스 스타일을 얻지 못하는 이유를 아는 사람이 있습니까?

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

은 또한 선택하기 전에 쉼표를 누락하는 것 : 문제의 원인이 될 수있는 어쨌든 부분에 초점을 당신이 마지막에이 블록으로 선택 초점 스타일을 재정의 할 수 있었던 것처럼

출처

2013-08-14 coder

내가 문제를 알아 냈습니다 - 문제는 tabIndex과 함께 생성 된 div에 select가 포함되어 있습니다. 나는 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-15 17:13:45 coder

보인다.

출처

2013-08-14 16:01:46 Andrew

쉼표를 추가하고 선택 : 포커스를 제거하여 덮어 쓰지 않고 여전히 작동하지 않았는지 확인하려고했습니다. – coder

특정 브라우저를 사용하고 있습니까? 나는 이것을 시도했다 ... [link] (http://jsfiddle.net/RMF6Z/1/) 그리고 그것은 작동하는 것처럼 보인다. 내가 바꾼 유일한 것은 테두리 크기였습니다. – Andrew

크롬을 사용하고 링크가 작동했지만 코드에 코드를 넣으면 내 프로젝트에서 작동하지 않습니다. 이 라이브러리를 사용하고 있다는 사실과 관련이 있다고 생각하십니까? select2 상자에 http://ivaynberg.github.io/select2/? – coder

선택 상자의 tabfocus

답변

관련 문제