1

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

有什么我跳过的吗？或者在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;
  }
}
4

1 回答 1

0

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

将此添加到CSS：

.ais-SearchBox-input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
于 2021-07-09T12:07:20.577 回答