Kürzlich schreibe ich eine Website, die einen Anwalt an die Rezeption empfiehlt. Es gab ein Problem im Suchfeld oben. Ich wollte das Suchymbol in das Suchfeld einfügen, aber es war nach langer Zeit nicht sehr zufriedenstellend ...
Gehen wir ohne weiteres direkt zum Thema:
Grundlegende Ideen
Setzen border das Eingabefeld und das Symbol border
Wir werden den Code direkt hochladen:
HTML:
<div class = search> <form action = http: //baidu.com> <Eingabe type = text placeholder = Bitte geben Sie den von Ihnen gesuchten Anwalt oder Fachwissen ein, das Sie gesucht haben> <span> <a href =#> <img src = img/icon1.png Alt => </a> </span> </form> </div>
CSS:
Hier ist der Stil, die gesamte DIV außerhalb der DIV zu setzen
.search {width: 250px; Höhe: 35px; Grenze: 1px fest Weiß; Border-Radius: 30px;}Hier soll die Länge und Breite des Eingabefeldes im Inneren einstellen, der Boder ist 0PX, die Schriftgröße im Inneren und der Rand ist beim Klicken nicht hell (Umriss: Keine)
Legen Sie hier die Transparenz ein, mit rgba() , die letzte Eigenschaft ist Transparenz (zwischen 0-1)
Eingabe {Breite: 200px; Höhe: 35px; Grenze: 0; Schriftgröße: 14px; Umriss: Keine; Hintergrundfarbe: RGBA (255, 255, 255, 0); Farbe: weiß; Schriftgröße: 16px; Rand: 0 10px; ZusammenfassenDies ist der Artikel über den Implementierungscode von HTML -Hinzufügen im transparenten Eingangsfeld. Weitere verwandte HTML -Inhalte für transparentes Eingabefeld -Symbol -Icon -Inhalte suchen Sie bitte nach früheren Artikeln von Wulin.com oder stöbern Sie weiter unten in den zugehörigen Artikeln. Ich hoffe, jeder wird Wulin.com in Zukunft unterstützen!