Suchen Taste in das Suchfeld wie Bing
-
01-10-2019 - |
Frage
Wie kann ich eine Suchtaste in dem Suchfeld implementieren, wie auf einer Website wie Bing gesehen?
Lösung
Es sieht aus wie in er ist, aber es ist nicht (man kann nicht innerhalb einer Eingabe setzen html).
2 Elemente (ein Eingang und ein Knopf) sind nahe beieinander und mit 0 Rand und beide haben die gleiche Höhe. Die Grafik der Schaltfläche hat einen 3px weißen Rand. So ist es diesen Effekt erzeugt.
Eine mögliche Markup und Styling könnten sein:
<input type="text" id="q" />
<input type="button" id="b" value="Search" />
#q, #b {
margin: 0
}
#q {
padding: 5px;
font-size: 2em;
line-height: 30px
}
#b {
/* image replacement */
text-indent: -99999px;
width: 30px;
height: 30px;
display: block;
background: gray url(button.png) 0 0 no-repeat;
/* placing next to input using float or absolute positioning omitted ... */
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow