更改搜索栏中的背景颜色

Question

我即将开始在我的网站上使用 Algolia 即时搜索，但我不知道要设置哪些 CSS 元素才能像处理文本那样更改背景颜色。我知道这是可能的，因为其他网站有深色搜索栏并使用它们，但是将 background-color="black" 放在 DIV 中不起作用。

他们的文档没有说明搜索栏的颜色，谷歌搜索也没有任何结果。 https://www.algolia.com/doc/api-reference/widgets/search-box/js/

感谢任何帮助！

Answer 1

你可以这样做：

instantsearch.widgets.searchBox({
  // ...
  cssClasses: {
    input: 'bg-black',
  },
});

然后在您的 CSS 文件中：

.bg-black {
  background-color: black;
}

您实际上是在要求 InstantSearch 添加一个名为 bg-black 的附加 class 到它呈现的 HTML 输入元素。然后在您的 CSS 中，您定位 CSS 选择器并向其添加样式。

Changing the background color in a search bar