推特的typeahead.js建议没有样式(没有边框，透明背景等)
推特的typeahead.js建议没有样式(没有边框，透明背景等)
提问于 2013-11-26 00:36:30
我使用的是twitter的typeahead.js 0.9.3，我的建议看起来一点都没有格式化。
我明白了：
而不是这样：(取自examples page)
JavaScript启用typeahead:
$('.search-typeahead').typeahead({
name: 'videos',
remote: {
url: '/api/v1/internal/videos/typeahead?text=%QUERY'
}
});HTML输入元素：
<input type="text" value="" id="search_keywords" class="no-clear search-typeahead"/>补充说明：
我工作的网站是jQuery 1.10.1，不使用twitter bootstrap。有很多CSS不是我写的，所以我不熟悉，我担心这会影响到它，但是这个插件似乎添加了自己的样式(没有附带的.css文件)，所以理论上它不应该覆盖这些东西吗？我搞不懂为什么我的样式可以工作，而插件添加的样式却不能，导致建议具有透明的背景，没有边框等。
回答 11
Stack Overflow用户
回答已采纳
发布于 2013-11-26 07:27:55
现在看一下docs，我看到：
默认情况下，由typeahead.js创建的下拉菜单看起来很难看，你需要设置它的样式，以确保它适合你的网页主题。
因此，我的解决方案是从我希望复制的示例中复制样式：
.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
border-radius: 8px;
outline: none;
}
.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999;
}
.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-is-under-cursor { /* UPDATE: newer versions use .tt-suggestion.tt-cursor */
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}Stack Overflow用户
发布于 2014-11-15 00:17:33
因此，下面的样式会给你带来这样的外观和感觉。它基于我从官方Typeahead示例网站提取的CSS。
CSS：
.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
}
.tt-menu { /* used to be tt-dropdown-menu in older versions */
width: 422px;
margin-top: 4px;
padding: 4px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
line-height: 24px;
}
.tt-suggestion.tt-cursor,.tt-suggestion:hover {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}这假设您的输入将具有form-control类。对于我的例子，它是这样的：
<input class="typeahead form-control" type="text" placeholder="States of USA">Stack Overflow用户
发布于 2014-10-07 17:45:12
https://github.com/bassjobsen/typeahead.js-bootstrap-css/blob/master/typeaheadjs.css
其他的看起来不是很好，这个看起来最像Bootstrap。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20198247
复制相关文章
相似问题