HTML-Code zum Hinzufügen von Symbolen zum transparenten Eingabefeld

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 border des Eingabefelds auf 0 Pixel und setzen Sie schließlich border des Div auf den endgültigen äußeren Rand

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).
Um die Transparenz einzustellen, verwenden Sie rgba() . Das letzte Attribut ist die Transparenz (zwischen 0 und 1).

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!