Wie diesen Code im input-Feld einfügen?
Einen schönen Abend zusammen,
hat jemand eine Idee wie ich diesen Unicode (🔎) in die input Suchleiste einfügen könnte ?
ich habe es bei CSS sou versucht:
input{
background-image: url(🔎);
Meine zweite Idee war ein Bild in meinen Dateien abzuspeichern und diese ebenfalls wie angeführt zu verlinken.
background-image: url(Bild 1);
Leider funktioniert es nicht, hat jemand eine Lösung für dieses Problem ?
Ich würde gerne darauf hinweisen, dass ich versuche eine Lupe im Suchfeld einzufügen.
2 Antworten
a) Du kannst das Icon im Placeholder einfügen:
<input placeholder="🔎">
Wenn es nun noch horizontal ausgerichtet werden soll, kannst du das mit CSS lösen.
Beispiel:
input::placeholder {
text-align: right;
}
b) Schiebe das Icon als Pseudoelement an die gewünschte Position. Das folgende Beispiel zeigt es an der rechten Kante des Eingabefeldes.
HTML:
<label>Search: <input></label>
CSS:
label {
position: relative;
}
label::after {
content: '\01F50E';
position: absolute;
right: 1px;
top: -1px;
}
input {
padding-right: 25px;
}
Wenn das Icon klickbar sein soll, wäre es besser, es über ein Buttonelement anzuzeigen, welches du absolut positionierst.
Ich würde es so lösen
CSS
input {
border: white 0px;
margin-left: 20px;
width: 100%;
}
#search_field {
display: flex;
border: black 1px solid;
padding: 10px;
}
HTML
<div id="search_field">
<p>🔎</p>
<input>
</div>
Die Lupe ist zwar außerhalb des Inputs aber es erfüllt ja den gleichen Zweck. Oder als alternative den Unicode einfach als Placeholder setzen
Ich würde gerne noch einen kleinen Text hinzugeben, weißt du eventuell ob dies mit diesem Code funktioniert (ich meine einen Text eingeben der sofort verschwindet wenn man was in die Suchleiste eingibt) ?
<input placeholder="🔎"; placeholder="Text eingeben";