InstantSearch 无法删除重置查询的蓝叉

Question

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

有没有我跳过的东西？或在 css 中添加额外内容？我可能在实施之前为此使用了模板

我的html:

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

我的css:

.ais-SearchBox {
}

.ais-SearchBox-form {
  display: flex;
}
.ais-Pagination {
  margin-top: 1em;
}
.ais-SearchBox-resetIcon {
  height: 2rem;
  width: 2rem;
}
.left-panel {
  float: left;
  width: 250px;
}

.right-panel {
  margin-left: 260px;
}

.ais-InstantSearch {
  max-width: 960px;
  overflow: hidden;
  margin: 0 auto;
}

.ais-Hits-item {
  margin-bottom: 1em;
  width: calc(50% - 1rem);
}

.ais-Hits-item img {
  margin-right: 1em;
}

.hit-name {
  margin-bottom: 0.5em;
}

.hit-description {
  color: #888;
  font-size: 14px;
  margin-bottom: 0.5em;
}
.ais-SearchBox-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0.3rem 1.7rem;
  position: relative;
  background-color: transparent;
  border: 1px solid white;
  color: white;
  text-align: center;
  font-size: 2.5rem;
  caret-color: #d8fc91;
}
.ais-SearchBox-input::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}

.ais-SearchBox-input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}

.ais-SearchBox-input::-ms-input-placeholder {
  /* Microsoft Edge */
  color: white;
}
.ais-SearchBox-input:focus {
  outline: none;
}
.ais-Highlight-highlighted {
  background-color: aqua;
}
.ais-SearchBox-submitIcon {
  display: none;
}
@media (min-width: 768px) {
  /*Medium in tailwind*/
  .ais-SearchBox-input {
    font-size: 5.625rem;
  }
}

Answer 1

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

将此添加到 css：

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

InstantSearch 无法删除重置查询的蓝叉

InstantSearch can't remove blue cross which resets query

reactjs

algolia

instantsearch

tailwind-css