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要素