實施typeahead.js CSS問題

進出口使用的typeahead.js有一個問題，從Twitter的一個新的插件，你可以查看這個插件應該如何看一個例子：http://twitter.github.com/typeahead.js/examples/實施typeahead.js CSS問題

你可以在這裏看到我的實現： http://mypcisbroke.co.uk/problem/

我的問題

文本框應該變爲白色焦點
建議其自動完成（此安裝插件的工作之前）在文本框應該是較亮的顏色

這裏是我的網站的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 }

這是預輸入的造型

.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 
}

任何幫助，在此將非常感激。

感謝

來源

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'應該很少使用 – 2013-02-23 01:10:27

幾乎在那裏，添加重要之後它隱藏了建議？插件似乎創建了一個透明的文本框，這就是爲什麼焦點在技術上仍然在另一個權利？ – amof 2013-02-23 01:20:18

看看我的回答，我認爲它會解決透明建議的問題 – 2013-02-23 01:21:05

在typeahead.css文件的第13行上，您有一行代碼，其內容如下：

background-color: transparent !important;

這是必要的，因爲這個確切原因。它爲.tt-query中的所有內容創建了transparent的背景顏色（但我不確定它位於何處，因爲在您的html中沒有任何類別的tt-query）。你的:focus樣式很好。如果你刪除!important，那麼你的代碼應該運行良好。

作爲一種替代方法，您可以使用dark暗示的方法，並將!important添加到焦點樣式中。這工作，但我只用這個bug修復和生產。我幾乎不會在部署的網站上使用它

來源

2013-02-23 01:17:14

你是正確的，這也有效，但也隱藏了建議，因爲它優先。該插件創建第二個文本框，以便將它正確放置在原始頂部。問題是focust永遠不會在原始文本框中提示它。 – amof 2013-02-23 01:29:09

您可以將html添加到原始問題中嗎？ – 2013-02-23 01:31:47

我只能看到它與螢火蟲或鉻開發工具的dom。你可以在這裏看到我的意思：http://mypcisbroke.co.uk/problem/example2.html，我已經刪除了造型 – amof 2013-02-23 01:35:03

實施typeahead.js CSS問題

回答

相關問題