如何解决InstantSearch 无法删除重置查询的蓝叉
我正在使用 algolia 的 InstantSearch 创建一个输入字段,但是我在调试这个交叉的来源时遇到了问题。当输入字段被聚焦或悬停时,它会出现,蓝色十字出现,看起来它清除了查询。 (我已经有一个用于重置的按钮)。当悬停/聚焦时,检查元素不会显示任何“弹出”,我想知道它是如何到达那里的
有什么我跳过的吗?或在 css 中添加额外内容?在实施之前,我可能已经为此使用了模板
我的 html:
novel_books
我的CSS:
<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>
解决方法
输入上的 type="search" 似乎是这里的问题。(SearchBox 标签已经自动给了它类型)
将其添加到 css:
.ais-SearchBox-input[type="search"]::-webkit-search-cancel-button {
display: none;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。