Suchsymbol zum Eingabefeld

Question

hinzufügen

Innerhalb des obigen Codes möchte ich ein Suchsymbol für jede neue Eingabe hinzufügen, die mit einer Schaltfläche generiert wird (id = add; hier nicht zur Vereinfachung gezeigt). Dies wäre eine typische Eingabe:

<label> 
<input type="text" class="search" name="word" autofocus="autofocus" /> 
<span class="search-icon"> 
    <span class="glass"></span> 
    <span class="handle"></span> 
</span> 
</label> 

Mit CSS konnte ich die Suchsymbole auf eine feste Art und Weise positionieren.

Dank

Answer 1

Hier ist der CSS-Code, den ich benutzen würde:

<style> 
#add{ 
padding:17px;padding-left:55px;width:300px;border:1px solid #f5f5f5; 
font-size:13px;color:gray; 
background-image:url('http://i47.tinypic.com/r02vbq.png'); 
background-repeat:no-repeat; 
background-position:left center;outline:0; 
} 
</style> 

Hinweis: Ich habe eine Menge von zusätzlichen Codes hinzugefügt das Suchfeld besser aussehen, der erforderliche Code, um die Suche zu machen box apear ist padding-left, background-image: url, background-repeat und background-position. Ersetzen Sie "http://i47.tinypic.com/r02vbq.png" mit dem gewünschten Suchsymbol.

Es ist auch wichtig zu wissen, dass jetzt in HTML5, die meisten Browser

<input type="search" results> 

mit einem Suchsymbol machen. Die Suche nach Eingabetyp macht es zu einem Suchfeld mit einer "x" -Schaltfläche zum Löschen, und das Hinzufügen von "Ergebnissen" zeigt auch ein Suchfeld an. Natürlich könnten Sie auch eine x-Schaltfläche mit CSS und JavaScript zu einem normalen Suchfeld hinzufügen. Es ist auch wichtig zu beachten, dass die Suche nach Eingabetyp sehr wenig Styling ermöglicht. Demo auf Safari auf einem Mac:

Sag mir, wenn diese Ihnen hilft, und stellen Sie sicher, als die Antwort zu markieren. :)

Answer 2

, um das Bild in die Spanne, beispielsweise background-image verwendet, ist ihm dann eine relative Position geben und ihn nach links zu bewegen, so dass es dem rechten Ende des Suchfelds überlappt, zum Beispiel:

#g-search-button { 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    position: relative; 
    left: -22px; 
    top: 3px; 

    background-color: black; /* Replace with your own image */ 
} 

Working example on JSBin

Hinweis: Dies ist nicht meine Antwort, ich habe es here

Answer 3

gefunden

auf kirupa.com hier eine Schritt für Schritt gibt es: http://www.kirupa.com/html5/creating_an_awesome_search_box.htm

Mit entsprechenden Bit von CSS für Sie hier:

input[type=text] { 
    width: 260px; 
    padding: 5px; 
    padding-right: 40px; 
    outline: none; 
    border: 2px solid #999999; 
    border-radius: 5px; 
    background-color: #FBFBFB; 
    font-family: Cambria, Cochin, Georgia, serif; 
    font-size: 16px; 
    background-position: 270px -10px; 
    background-image: url('http://www.kirupa.com/images/search.png'); 
    background-repeat: no-repeat; 
}