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

Question

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

我怎么能效仿这一位置？我可以自己编写计数器，但我怎么才能让数字出现在那里呢？

Answer 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元素的焦点轮廓