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

【问题标题】：typeahead.js can't find the styling to modify it OR can I override an html elements style from css?typeahead.js 找不到修改它的样式或者我可以从 css 覆盖 html 元素样式吗？
【发布时间】：2020-03-27 17:36:00
【问题描述】：

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

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

谢谢，院长

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

【问题讨论】：

标签： css typeahead.js

【解决方案1】：

有一些内置的类名（如果我记得没有记录）可以用来覆盖默认样式。这是我的一个项目的一个例子。我认为tt-menu 课程是您想要的课程。它作为一个整体控制整个弹出菜单。

/*****************************
 * 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 的内部工作可能不是你想要的。

【讨论】：

我认为元素样式属性是最终覆盖，所以它不起作用，对吗？ IE。出于某种原因，typeahead.js 正在添加一个元素样式属性（我希望它没有）。顺便说一句，感谢您接管 typeahead.js ......它太棒了！！！！（奇怪，我似乎无法用 @ 标记你 Jeremy...
嗯，是的，样式属性更难覆盖。我没有看到它正在设置它，包括 z-index。试试这个 CSS 技巧页面：css-tricks.com/override-inline-styles-with-css