구현 typeahead.js CSS 문제

인스턴트 메신저 typeahead.js를 사용하는 데 문제가, 트위터에서 새로운 플러그인이 플러그인이보고 생각하는 방법의 예를 볼 수 있습니다 : 당신은 내 구현을 여기에서 볼 수 있습니다구현 typeahead.js CSS 문제

http://twitter.github.com/typeahead.js/examples/ : http://mypcisbroke.co.uk/problem/

내 문제

는
제안 자동 완성 (이 플러그인을 설치하기 전에 일) 텍스트 상자에 밝은 색

에 있어야하는 것은 다음이이에

.typeahead, 
.tt-query, 
.tt-hint { 
    width: 396px; 
    height: 30px; 
    padding: 8px 12px; 
    font-size: 24px; 
    line-height: 30px; 
    border: 2px solid #ccc; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
      border-radius: 8px; 
    outline: none; 
} 

.typeahead:focus { 
    border: 2px solid #0097cf; 
} 

.tt-query { 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
} 

.tt-hint { 
    color: #999 
}

어떤 도움이 정말 감사하겠습니다 선행 입력의 스타일 내 사이트의 CSS를

.navbar .top-search form { margin: 0 10px 0 0; padding-top: 5px; position: relative; } 
.navbar .top-search input, .navbar .top-search button { -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } 
.navbar .top-search input { padding: 2px 24px 2px 10px; border: none; margin: 0; width: 150px; background: #999; -webkit-border-radius: 20px; moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; } 
.navbar .top-search input:focus { background: #f5f5f5; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; } 
.navbar .top-search button { opacity: .6; position: absolute; right: 7px; top: 9px; padding: 0; margin: 0; line-height: 12px; background: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; } 
.navbar .top-search input:focus + button { opacity: 1 }

입니다.

감사

출처

2013-02-22 amof

는 .navbar .top-search input에 !important 규칙을 추가하면 초점 흰색을 얻을 것이다. 특이 충돌이

이런 식으로 추가 .. 어딘가에 분명히 있습니다 :
```
.navbar .top-search input:focus { 
background: none repeat scroll 0 0 #F5F5F5 !important; 
box-shadow: none; 
} 
```
그냥 라인에 typeaheadstyling.css 파일에 .tt-suggestion p 선택을 편집 제안을 글꼴 색상을 변경하려면 58

출처

2013-02-23 00:54:49 Adrift

'! important'는 매우 드물게 사용되어야합니다. –

거의 중요하게 추가 된 후 제안을 숨 깁니다. 플러그가 서로의 위에 투명한 텍스트 상자를 만드는 것처럼 보이는 이유는 초점이 기술적으로 다른 오른쪽에있는 이유는 무엇입니까? – amof

내 대답을 봐, 나는 그것이 투명 제안의 문제를 해결할 것입니다 생각합니다 –

typeahead.css 파일의 13 행에는 다음과 같은 코드 행이 있습니다.

background-color: transparent !important;

정확한 이유가 있습니다. .tt-query의 모든 내용에 대해 transparent의 배경색을 만들고 있습니다 (단, html에는 tt-query의 클래스가 없으므로이 위치는 어디에 있는지 잘 모르겠습니다). :focus 스타일은 괜찮습니다. !important을 제거하면 코드가 올바르게 작동합니다.

어둡게 표시된 방법을 사용하고 !important을 포커스 스타일에 추가 할 수 있습니다. 이 기능은 작동하지만 버그 수정 및 생산에만이 기능을 사용합니다. 거의 이것을 배포 된 사이트에서 사용합니까?

출처

2013-02-23 01:17:14

당신은 바로 이뿐 아니라 또한 효과가 있지만 또한 우선 순위를하기 때문에 제안을 숨 깁니다. 플러그인은 원본의 dirrectly ontop에 위치하는 제안을위한 두 번째 텍스트 상자를 만듭니다. 문제는 focust가 원래 텍스트 상자에 .tt-hint가 없다는 것입니다 ... – amof

원래 질문에 html을 추가 할 수 있습니까? –

파이어 버그 또는 크롬 개발자 도구로 돔을 볼 때만 볼 수 있습니다. http://mypcisbroke.co.uk/problem/example2.html에서 스타일을 삭제했습니다. – amof

구현 typeahead.js CSS 문제

답변

관련 문제