Heim > Artikel > Web-Frontend > Erstellen Sie ein schönes Suchfeld mit CSS

Erstellen Sie ein schönes Suchfeld mit CSS

小云云Original: 2017-11-29 11:20:347052Durchsuche

Bei der Website-Entwicklung ist eine der grundlegendsten Funktionen definitiv unverzichtbar, nämlich das Suchfeld. Dann kann der Suchfeldstil eine Website auch schöner und edler aussehen lassen. Jetzt zeigen wir Ihnen, wie Sie das Suchfeld schön gestalten.

Rendering:
Erstellen Sie ein schönes Suchfeld mit CSS

Es gibt zwei Möglichkeiten, diesen Effekt zu erzielen: Die eine besteht darin, einen Hintergrund als Ganzes zu verarbeiten und das Suchfeld in Form eines transparenten GIF zu finden , oder separat schneiden, diese Methode lädt schneller und ist flexibler.
Im Artikel verwendete Bilder

Erstellen Sie ein schönes Suchfeld mit CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS美化的漂亮搜索框</title>  
<style type="text/css">  
body{  font: normal 100% &#39;Arial&#39;,&#39;Helvetica&#39;,&#39;Verdana&#39;,sans-serif;  color: #333;  }  
p {  padding: 12px 0;  margin: 0;  font-size: .8em;  line-height: 1.5;  }  
form {  margin: 0;  }  #search_box 
{  width: 201px;  height: 31px;  background: url(http://files.jb51.net/demoimg/200912/Erstellen Sie ein schönes Suchfeld mit CSS);  }  #search_box #s 
{  float: left;  padding: 0;  margin: 6px 0 0 6px;  border: 0;  width: 159px;  background: none;  font-size: .8em;  }  
#search_box #go {  float: right;  margin: 3px 4px 0 0;  }  </style>  </head>  <body>  <div id="search_box"> 
 <form id="search_form" method="post" action="#">  <input type="text" id="s" value="Search" /> 
  <input type="image" src="http://files.jb51.net/demoimg/200912/Erstellen Sie ein schönes Suchfeld mit CSS" width="27" height="24" id="go" alt="Search" title="Search" /> 
   </form> 
    </div> 
     </body> 
      </html>

Tipp: Sie können einen Teil des Codes ändern, bevor Sie ihn ausführen

Das ist it Das von uns mithilfe von CSS implementierte Suchfeld ist einfach und schön. Natürlich können Sie der oben beschriebenen Methode folgen, um ein Suchfeld zu erstellen, das Ihnen gefällt.

Verwandte Empfehlungen:

So verwenden Sie Js, um die Baidu-Suchfeld-Eingabeaufforderungsfunktion zu implementieren

Reine CSS3-Implementierung der Suchfeldfunktion Beispieldemonstration

8 CSS3-Suchfelder teilen

Das obige ist der detaillierte Inhalt vonErstellen Sie ein schönes Suchfeld mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Entwicklungserfahrung mit H-Tags in WebseitenNächster Artikel：Entwicklungserfahrung mit H-Tags in Webseiten

In Verbindung stehende Artikel

Mehr sehen