Ich habe vor Kurzem eine Website mit Anwaltsempfehlungen geschrieben und es gab ein Problem mit dem Suchfeld. Ich wollte das Suchsymbol in das Suchfeld einfügen, aber nach viel Arbeit hat es immer noch nicht funktioniert ... Kommen wir ohne weitere Umschweife direkt zur Sache: Grundgedanke Platzieren Sie einfach das Eingabefeld und das Symbol dahinter in einem Div, setzen Sie dann Wir gehen direkt zum Code: HTML: <div Klasse="Suche"> <form action="http://baidu.com"> <input type="text" placeholder="Bitte geben Sie den gesuchten Anwalt oder das Fachgebiet ein"> <span> <a href="#"><img src="img/icon1.png" alt=""></a> </span> </form> </div> CSS: Hier ist der Stil für das gesamte Div außerhalb .suchen { Breite: 250px; Höhe: 35px; Rand: 1px durchgehend weiß; Rahmenradius: 30px; } Hier können Sie die Länge und Breite des Eingabefelds festlegen. Der Rahmen beträgt 0 Pixel, die Schriftgröße darin und der Rand leuchtet beim Klicken nicht auf (Umriss: keine). Eingabe { Breite: 200px; Höhe: 35px; Rand: 0; Schriftgröße: 14px; Gliederung: keine; Hintergrundfarbe: rgba(255, 255, 255, 0); Farbe: weiß; Schriftgröße: 16px; Rand: 0 10px; Zusammenfassen Dies ist das Ende dieses Artikels über den Implementierungscode zum Hinzufügen von Symbolen in transparenten HTML-Eingabefeldern. Weitere relevante HTML-Symbolinhalte für transparente Eingabefelder finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Detaillierte Erklärung zur Verwendung von $props, $attrs und $listeners in Vue
>>: HTML+CSS zur Realisierung einer einfachen Navigationsleistenfunktion
MySQL-Batch löschen großer Datenmengen Angenommen...
1. Gehen Sie zur offiziellen Website: D:\mysql-5....
Teil 1 HTML <html> – Start-Tag <Kopf>...
beschreiben Dieser Artikel stellt eine Methode zu...
Die Tabellenpartitionierung unterscheidet sich vo...
Inhaltsverzeichnis Webkomponenten benutzerdefinie...
In diesem Artikel wird der spezifische Code für V...
/****************** * Erweiterter Zeichengerätetr...
Mit der CSS3-Eigenschaft „border-image“ können Si...
Eine Website verwendet viel HTML5 und CSS3 und ho...
In diesem Artikel wird der einfache Prozess der I...
<br />Ich freue mich sehr, an dieser Folge d...
In diesem Artikel wird hauptsächlich das Vue-Proj...
1. js schützt hasOwnProperty nicht vor unrechtmäß...
Heute habe ich zufällig einem Freund beim Umzug s...