Wie kann man CSS-Kommentare hinzufügen und verwenden
Die Suchfelder sind auf jeder Webseite sehr verbreitet. Es ist sehr nützlich, um bestimmte Daten zu finden. Es kann über autovervollständigte Funktionen, die den Benutzern bei der Suche helfen, verfügen.
In diesem Kapitel werden wir darüber sprechen, wie man Suchboxen mit CSS und HTML Schritt für Schritt erstellen kann.
- HTML erstellen.
- Erstellen Sie ein Tag <form>, mit dem HTML-Formulare zur Benutzereingabe auf der Webseite hinzugefügt werden können.
- Fügen Sie das Tag <input> ins Element <form> ein.
- Fügen Sie auch den Platzhalter "Search here!" und eine Klasse von "Search" ein.
- Fügen Sie eine weitere Eingabe mit einer Klasse "submit" und dem Wert "search" ein.
<form>
<input type="text" name=text" class="search" placeholder"Search here!">
<input type="submit" name="submit" class="submit" value="Search">
</form>Jetzt haben wir unser Suchfeld, aber wir sollen es stylen.
- Fügen Sie CSS ein.
Wir haben drei Elemente, die wir gestalten sollen: "form", "search" und "submit".
- Stellen Sie die Hintergrundfarbe des Körpers (body) ein.
- Beginnen Sie mit der Gestaltung von Formen "suchen" und "absenden" classes.
- Stellen Sie die Eigenschaften width, margin, padding und font-size ein.
<style>
body {
background-color: #8ebf42;
}
form {
width:400px;
margin:auto;
margin-top: 250px;
}
input{
padding:4px 10px;
border:0;
font-size:16px;
}
.search {
width: 75%;
}
.submit{
width: 70px;
background-color: #1c87c9;
color:#ffffff;
}
</style>Nachdem Sie alle Eigenschaften hinzugefügt haben, führen Sie den Code aus und sehen Sie, wie Sie das Suchfeld erstellt haben!
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
background-color: #8ebf42;
}
form {
width:400px;
margin:auto;
margin-top: 250px;
}
input{
padding:4px 10px;
border:0;
font-size:16px;
}
.search {
width: 75%;
}
.submit{
width: 70px;
background-color: #1c87c9;
color:#ffffff;
}
</style>
</head>
<body>
<h2>Erstellen von Suchfeldern</h2>
<form>
<input type="text" name=text" class="search" placeholder"Search here!">
<input type="submit" name="submit" class="submit" value="Search">
</form>
</body>
</html>Lassen Sie uns andere Suchfelder erstellen:
Beispiel
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Fantastisches Suchfeld</title>
<style>
body {
margin: 0;
padding: 0;
background: #00a08d;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #666666;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
color: black;
}
.search-btn {
color: #eeeeee;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
color: white;
cursor: pointer;
text-decoration:none;
}
.search-btn > i {
font-size: 20px;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
font-weight: bold;
}
}
</style>
</head>
<body>
<div class="search-box">
<input type="text" name="" class="search-txt" placeholder="
Geben Sie den zu suchenden Text ein"/>
<a class="search-btn" href="#">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</div>
</body>
</html>In dem angegebenen Beispiel haben wir ein Suchicon von Fontawesome verwendet.
Ein weiteres Beispiel für Suchfelder, die nur HTML und CSS verwenden:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Der Titel des Dokuments</title>
<style>
body{
background: #cccccc;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #9e0098;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
}
.searchTerm:focus{
color: #380136;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #9e0098;
background: #9e0098;
text-align: center;
color: #eeeeee;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.wrap{
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Create search boxes</h2>
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="Typ">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</body>
</html>Ein weiteres Beispiel für die Erstellung von Suchfeldern:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 50%;
}
body {
box-sizing: border-box;
}
.container {
width: 25rem;
height: 100%;
margin: 0 1rem;
position: relative;
}
h2 {
margin: 2rem;
font-size: 20px;
}
.searchbar {
font-size: 2.4rem;
width: 25rem;
height: 5rem;
border: none;
outline: none;
border-radius: 10rem;
padding: 2rem;
transition: all .1s;
transition-delay: .1s;
}
.searchbar:hover {
width: 27rem;
height: 6rem;
}
.button {
height: 2rem;
position: absolute;
top: 1.5rem;
right: 1rem;
transition: all .1s;
transition-delay: .1s;
}
.button:hover {
cursor: pointer;
}
.searchbar:hover + .button {
height: 2.5rem;
top: 1.8rem;
right: 0;
}
.searchbar::placeholder {
opacity: .3;
}
</style>
</head>
<body>
<h2>Suchfeld erstellen</h2>
<div class="container">
<input type="text" maxlength= "12" placeholder="Search" class="searchbar">
<img src="https://images-na.ssl-images-amazon.com/images/I/41gYkruZM2L.png" alt="search icon" class="button">
</div>
</body>
</html>