Wie kann ich eine Suchschaltfläche im Suchfeld implementieren, wie auf einer Site wie Bing?Suchschaltfläche im Suchfeld wie Bing
8
A
Antwort
22
Es sieht genauso aus wie es drin ist, aber es ist nicht (man kann nicht innerhalb einer Eingabe setzen html).
Die 2 Elemente (eine Eingabe und eine Schaltfläche) sind nahe bei 0 Rand und beide haben die gleiche Höhe. Die Grafik der Schaltfläche hat einen weißen 3-Pin-Rand. Also schafft es diesen Effekt.
Eine mögliche Markup und Styling könnte 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 ... */
}
3
+3
Die Verbindung ist tot. –
+2
Ich habe den Link korrigiert! –
so nebenbei: Sie auf eine Schaltfläche auf einer Suchleiste unter Verwendung von relativen oder absoluten Positionierung setzen. – chacham15