如何模拟 Chrome 的 Ctrl+F 计数器 [关闭]答案

【问题标题】：How to Emulate Chrome's Ctrl+F Counter [closed]如何模拟 Chrome 的 Ctrl+F 计数器 [关闭]
【发布时间】：2023-06-08 13:24:01
【问题描述】：

Chrome 的查找功能 (ctrl+f) 在输入框中有一个计数器。比如下图中的“1 of 40”：

如何模拟此展示位置？我可以自己对计数器进行编码，但我如何才能真正让数字出现在那里？

【问题讨论】：

标签： javascript html google-chrome find

【解决方案1】：

搜索框的结构如下：

span
   input
   label

有一个span 元素，具有固定的宽度、高度、白色背景、边框等。在此内部是一个用于搜索字段的input 元素。这之后是一个标签元素。由于input 元素是inline-block（默认情况下），因此标签显示在它的右侧。

简单示例：

body {
  background-color: #000;
}
.search-bar {
  background-color: #fff;
  width: 200px;
  height: 30px;
}
.search-bar input {
  background-color: #fff;
  border: none;
}
.search-bar input:focus  {
  outline: none;
}

<span class="search-bar">
  <input id="search" type="text" />
  <label for="search">1 of 20</label>
</span>

更新：添加了 CSS 以删除 input 元素焦点上的轮廓

【讨论】：

确保取消输入上的焦点状态，否则它在 chrome 中看起来很糟糕。
所以它实际上并没有在输入中，它只是看起来如此？
@RohanKhajuria 搜索是input，但标签本身在它的右侧。它看起来好像漂浮在上面，但这只是背景混合。
我无法让它工作。我的 HTML 代码是：<span id="searchBar"><input type="text" id="searchText" autofocus><label for="searchText">0 of 0</label></span>。我不关心它的外观，所以我只是在我的 CSS 中添加了#searchBar { height: 30px; width: 200px; }。如果它有所作为，我使用的是引导程序，而 html 是 Chrome 扩展程序的弹出窗口。
@RohanKhajuria 重点在于它的外观。以我为例，从那里开始。 Bootstrap 将有一些 CSS 规则来改变外观，因此您可以将它们的选择器附加到标记中，并为自定义选择器提供更具体的规则以获得您所追求的外观。现在你的问题有点模棱两可，因此为什么其他人投票搁置它。