InstantSearch 无法删除蓝色十字，这会重置查询

Question

我正在使用 algolia 的 InstantSearch 创建一个输入字段，但我在调试这个交叉的来源时遇到了麻烦。当输入字段获得焦点或悬停时，会出现蓝色十字，看起来像是清除了查询。（我已经有一个用于重置的按钮）。检查元素在悬停/聚焦时不会显示任何“弹出”内容，我想知道它是如何到达那里的

\n

有什么我跳过的吗？或者在CSS中添加额外的内容？在实施之前我可能已经使用了一个模板

\n

\n

我的html：

\n

  <div className="items-center h-full">\n        <InstantSearch\n          indexName={variables.ALGOLIA_INDEX}\n          searchClient={algolia}\n        >\n          <div className="h-full flex flex-col items-center justify-center">\n            <SearchBox\n              translations={{\n                placeholder: \'\',\n                resetTitle: \'T\xc3\xb8m s\xc3\xb8kefeltet\',\n              }}\n              reset={\n                <SearchCloseIcon className=" h-5 md:h-10 transform duration-500 hover:scale-110 cursor-pointer" />\n              }\n              autoFocus={true}\n            />\n            <Results />\n          </div>\n        </InstantSearch>\n      </div>\n

\n

我的CSS：

\n

.ais-SearchBox {\n}\n\n.ais-SearchBox-form {\n  display: flex;\n}\n.ais-Pagination {\n  margin-top: 1em;\n}\n.ais-SearchBox-resetIcon {\n  height: 2rem;\n  width: 2rem;\n}\n.left-panel {\n  float: left;\n  width: 250px;\n}\n\n.right-panel {\n  margin-left: 260px;\n}\n\n.ais-InstantSearch {\n  max-width: 960px;\n  overflow: hidden;\n  margin: 0 auto;\n}\n\n.ais-Hits-item {\n  margin-bottom: 1em;\n  width: calc(50% - 1rem);\n}\n\n.ais-Hits-item img {\n  margin-right: 1em;\n}\n\n.hit-name {\n  margin-bottom: 0.5em;\n}\n\n.hit-description {\n  color: #888;\n  font-size: 14px;\n  margin-bottom: 0.5em;\n}\n.ais-SearchBox-input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  padding: 0.3rem 1.7rem;\n  position: relative;\n  background-color: transparent;\n  border: 1px solid white;\n  color: white;\n  text-align: center;\n  font-size: 2.5rem;\n  caret-color: #d8fc91;\n}\n.ais-SearchBox-input::placeholder {\n  /* Chrome, Firefox, Opera, Safari 10.1+ */\n  color: white;\n  opacity: 1; /* Firefox */\n}\n\n.ais-SearchBox-input:-ms-input-placeholder {\n  /* Internet Explorer 10-11 */\n  color: white;\n}\n\n.ais-SearchBox-input::-ms-input-placeholder {\n  /* Microsoft Edge */\n  color: white;\n}\n.ais-SearchBox-input:focus {\n  outline: none;\n}\n.ais-Highlight-highlighted {\n  background-color: aqua;\n}\n.ais-SearchBox-submitIcon {\n  display: none;\n}\n@media (min-width: 768px) {\n  /*Medium in tailwind*/\n  .ais-SearchBox-input {\n    font-size: 5.625rem;\n  }\n}\n

\n

Answer 1

输入上有 type="search" 似乎是这里的问题。（SearchBox 标签已经自动给出了类型）

将其添加到 css 中：

.ais-SearchBox-input[type="search"]::-webkit-search-cancel-button {
  display: none;
}