typeahead.js 找不到样式来修改它，或者我可以覆盖 css 中的 html 元素样式吗？

Question

typeahead.js 是一个文件，但出于某种原因，它添加了具有 'style' 属性的 html 元素，我正在尝试修复 z-index，但它是在类型中定义的-在此处提前生成元素。不过，我没有看到 typeahead.js 中定义的样式。我如何将这个突出显示的东西覆盖为 z-index=9999999 因为这个主题中的一些元素是 99999（烦人）

我们正在尝试将菜单移到某些按钮上方，但我不知道如何修改 typeahead 生成的 html。为什么他们不在这里使用 css 和 typeahead.css 文件？好像有点奇怪。

谢谢，院长

找到这个项目（https://github.com/corejavascript/typeahead.js）一个分支并升级到 1.3.1 有同样的问题

Answer 1

有一些内置的 class 名称（未记录，如果我没记错的话）可以用来覆盖默认样式。这是我的一个项目中的示例。我认为 tt-menu class 是您想要的。它控制整个弹出菜单作为一个整体。

/*****************************
 * Twitter Typeahead Styling *
 *****************************/
.twitter-typeahead {
    width: 100%;
}

.tt-hint {
  color: #999;
}

.tt-menu {
  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:hover {
  background-color: #ddd;
}

.tt-suggestion p {
  margin: 0;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

更改生成的 HTML 需要分叉项目、修改代码，然后使用您的自定义版本。这并非不可能，但修改 typeahead.js 的内部工作可能不是您想要的。

typeahead.js 找不到样式来修改它，或者我可以覆盖 css 中的 html 元素样式吗？

typeahead.js can't find the styling to modify it OR can I override an html elements style from css?

css

typeahead.js