Eingabeknopf mit Hintergrund png

Question

Ich mache eine Tasteneingabe und versuche, ihm ein Suchsymbol zu geben, anstatt ihm einen Wert = "Suche" und die Schaltfläche "Suche" darauf zu geben. Ein anderes Aussehen, aber nichts funktioniert. Im Folgenden HTML ist:

<input class="searchButton" type="button"> 

dann in CSS:

.searchButton{ 
background-image: url('search.png'); 
outline: none; 
background-size: cover; 
} 

Bisher keine guten Ergebnisse. Jede Hilfe wäre willkommen.

Answer 1

Hier ist ein Beispiel mit der Schaltfläche statt Eingabe-Typ = Schaltfläche, die die Verwendung von span-Tags innerhalb der Schaltfläche selbst ermöglicht.

Es fällt außerhalb Ihrer Parameter, wie es das Bootstrap CSS verwendet, aber es funktioniert.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <button class="searchButton"><span class="glyphicon glyphicon-search"> Search</button>

Answer 2

diese CSS wird ein Bild auf Ihrem Knopf

.searchButton{ 
 
    width: 30px; 
 
    height: 30px; 
 
    background-image: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: 25px 25px; 
 
}

<input class="searchButton" type="button">

Answer 3

Stellen Sie sicher stellen, dass Ihr Bild Pfad korrekt ist. Aber Sie haben möglicherweise auch bessere Ergebnisse, wenn Sie Breite und Höhe für Ihre Stile angeben, da Sie den breitenbestimmenden Inhalt entfernen.

https://jsfiddle.net/7rsurdav/

document.querySelector('.searchButton').addEventListener('click',function(e){alert('clicked');});

.searchButton{ 
 
    background-color:transparent; 
 
background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png'); 
 
outline: none; 
 
background-size: cover; 
 
width:20px; 
 
height:20px; 
 
border:0px; 
 
border-radius:1px; 
 
}

<button class="searchButton"></button>