4

我在使用 typeahead.js 时遇到问题，这是 twitter 的一个新插件，您可以查看该插件的外观示例：http: //twitter.github.com/typeahead.js/examples/

你可以在这里看到我的实现：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 的样式

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

对此的任何帮助将不胜感激。

谢谢

4

2 回答 2

4

在typeahead.css文件的第 13 行，您有一行代码读取此内容

background-color: transparent !important;

由于这个确切的原因，这是必要的。transparent它正在为其中的所有内容创建背景颜色.tt-query（但我不确定它的位置，因为tt-query您的 html 中没有任何类）。你的:focus风格很好。如果您删除!important，那么您的代码应该可以正常运行。

作为替代方案，您可以使用黑暗建议的方法，并添加!important到焦点样式中。这可行，但我仅将其用于错误修复和生产。我很少在已部署的站点上使用它

于 2013-02-23T01:17:14.760 回答
2

  1. 添加!important规则.navbar .top-search input，您将获得白色焦点。显然某处存在特异性冲突..

    像这样添加它：

    .navbar .top-search input:focus {
background: none repeat scroll 0 0 #F5F5F5 !important;
box-shadow: none;
}

  2. 要更改建议字体颜色，只需在线编辑文件中的.tt-suggestion p选择器typeaheadstyling.css58

于 2013-02-23T00:54:49.663 回答