如何模拟Chrome的Ctrl + F计数器

Question

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

如何模拟此展示位置？我可以自己编写计数器，但是如何让数字显示在那里呢？

Answer 1

搜索框具有以下结构：

span
   input
   label

有一个span元素，其中包含固定的宽度，高度，白色背景，边框等。其中包含搜索字段的input元素。接下来是标签元素。由于input元素是inline-block（默认情况下），因此标签显示在右侧。

简单示例：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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