Heim >Web-Frontend >HTML-Tutorial >So erstellen Sie ein abgerundetes Suchfeld in HTML
So implementieren Sie das abgerundete Suchfeld in HTML: Erstellen Sie zunächst eine HTML-Beispieldatei. Erstellen Sie dann ein Eingabefeld. Implementieren Sie schließlich das abgerundete Suchfeld über Attribute wie „Rand oben links“. „Das ist es.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Wie erstelle ich ein Suchfeld mit abgerundeten Ecken in HTML?
Es ist sehr einfach. Es verwendet hauptsächlich das Border-Attribut in CSS. Das Codebeispiel lautet wie folgt:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> input[type=text] { color: #111; background-color: #c7dec6; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding:20px; } </style> </head> <body> <form action="http://www.baidu.com/baidu" target="_blank"> <input type="text" name="word" size="60" style="height: 30px;width: 1100px;background-color: #9a9a9a26;"> <input type="submit" value="搜索" style="border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding:20px; height: 60px;width: 80px; margin-left: 30px; background-color: #1591ea; font-size: large; color: antiquewhite;"> </form> </body> </html>
Der Laufeffekt ist wie folgt:
[Empfohlen: CSS-Video-Tutorial]
Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein abgerundetes Suchfeld in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!