So emulieren Sie den Ctrl + F-Zähler in Chrome

Question

Die Suchfunktion von Chrome (Strg + F) verfügt über einen Zähler im Eingabefeld. Zum Beispiel können die „1 von 40“ in das folgende Bild:

Wie kann ich diese Platzierung emulieren? Ich kann den Counter selbst programmieren, aber wie bekomme ich eigentlich die Nummern?

Answer 1

Das Suchfeld hat die folgende Struktur:

span 
    input 
    label 

Es ist ein span Element mit einer festen Breite, Höhe, weißen Hintergrund, Rahmen usw. Innerhalb dies ein input Element für das Suchfeld ist. Diesem folgt ein Label-Element. Da das Element input (standardmäßig) ein inline-block ist, erscheint das Label rechts davon.

Einfaches Beispiel:

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>

Update: Added CSS

Umriss auf Fokus des input Element zu entfernen