Contoh

Di bawah ini adalah contohnya

1. Bilah Pencarian

Kode

Search Bar

h1 {
text-align: center;
color: blue;
}
* {
outline: none;
}
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
background-color: brown;
}
.tableBar {
display: table;
width: 100%;
}
.tableDivision {
display: table-cell;
vertical-align: middle;
}
input, button {
margin: 0;
border: 0;
background-color: transparent;
color: green;
font-family: sans-serif;
padding: 0;
}
.top {
position: absolute;
top: 50%;
border-radius: 20px;
transform: scale[0.6];
margin: -83px auto 0 auto;
background-color: white;
left: 0;
right: 0;
width: 550px;
box-shadow: 0 10px 40px aqua, 0 0 0 20px blue;
padding: 35px;
}
form {
height: 96px;
}
input[type="text"] {
font-size: 60px;
line-height: 1;
width: 100%;
height: 96px;
}
input[type="text"]::placeholder {
color: red;
}
#myID {
padding-left: 35px;
width: 1px;
}
button {
width: 84px;
height: 96px;
cursor: pointer;
position: relative;
display: block;
}
#myCircle {
height: 43px;
margin-top: 0;
border-width: 15px;
position: relative;
top: -8px;
border: 15px solid #fff;
background-color: transparent;
border-radius: 50%;
left: 0;
width: 43px;
transition: 0.5s ease all;
background-color: transparent;
border-radius: 50%;
}
button span {
position: absolute;
top: 68px;
border-radius: 10px;
transform: rotateZ[52deg];
transition: 0.5s ease all;
width: 45px;
left: 43px;
display: block;
height: 15px;
background-color: transparent;
display: block;
}
button span:before, button span:after {
content: '';
position: absolute;
background-color: #fff;
border-radius: 10px;
bottom: 0;
right: 0;
transform: rotateZ[0];
transition: 0.5s ease all;
width: 45px;
height: 15px;
transition: 0.5s ease all;
}
#myID:hover #myCircle {
top: -1px;
width: 67px;
height: 15px;
border-width: 0;
background-color: #fff;
border-radius: 20px;
}
#myID:hover span {
top: 50%;
width: 25px;
margin-top: 3px;
left: 56px;
transform: rotateZ[0];
}
#myID:hover button span:before {
transform: rotateZ[52deg];
bottom: 11px;
}
#myID:hover button span:after {
bottom: -11px;
transform: rotateZ[-52deg];
}
#myID:hover button span:before, #myID:hover button span:after {
right: -6px;
width: 40px;
background-color: lime;
}



Search the Content with Search Bar

Keluaran

2. Bilah Pencarian Animasi

Kode

Search Bar

@import url[//fonts.googleapis.com/css?family=Open+Sans];
body {
background: white;
font-family: fantasy;
}
h1 {
color: red;
text-align: center;
}
.main {
border: solid 2px brown;
font-size: 28px;
color: maroon;
width: 600px;
margin: 150px;
}
.searchTop {
width: 100%;
display: flex;
position: relative;
}
.searchBar {
width: 100%;
border: 3px solid navy;
height: 20px;
border-radius: 5px 0 0 5px;
border-right: none;
padding: 5px;
outline: none;
color: green;
}
.searchBar:focus {
color: purple;
}
.searchButton {
width: 40px;
height: 36px;
font-size: 20px;
text-align: center;
color: white;
border: 1px solid gray;
border-radius: 0 5px 5px 0;
cursor: pointer;
background: gray;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
.topDiv {
width: 30%;
top: 50%;
left: 50%;
transform: translate[-50%, -50%];
position: absolute;
left: 50%;
transform: translate[-50%, -50%];
}



Animated Search Bar with Some Content








Now a days we are almost all the websites are
Using navigation bars are having HTML search bar. Example:
//www.educba.com/.

Keluaran

3. Bilah Pencarian Animasi

Kode

Search Bar

h1
{
color: maroon;
text-align: center;
}
body {
background-image: linear-gradient[to right, green, brown];
}
.topDiv {
position: absolute;
top: 50%;
left: 50%;
transform: translate[-40%, 40%];
height: 40px;
border-radius: 40px;
padding: 10px;
background: #2f3640;
border-radius: 40px;
padding: 10px;
}
.topDiv:hover>.searchBar {
width: 250px;
padding: 0 5px;
}
.topDiv:hover>.button {
background: white;
color: blue;
}
.button {
color: red;
float: right;
height: 45px;
border-radius: 50%;
background: aqua;
width: 45px;
justify-content: center;
align-items: center;
transition: 0.35s;
display: flex;
align-items: center;
transition: 0.35s;
}
.searchBar {
border: none;
background: none;
float: left;
padding: 0;
color: white;
outline: none;
transition: 0.4s;
line-height: 40px;
font-size: 16px;
width: 0px;
line-height: 40px;
padding: 0;
color: white;
}
@media screen and [max-width: 630px] {
.topDiv:hover>.searchBar {
width: 160px;
padding: 0 5px;
}
}



Animated Search Bar with radius



 search 

Keluaran

Penjelasan. Ketika kita mengklik pindahkan kursor ke tombol pencarian, maka itu dapat membuka bidang teks untuk memasukkan beberapa konten

Kesimpulan

Ini digunakan untuk mencari konten dalam halaman yang sama atau seluruh halaman dengan menggunakan fungsi yang berbeda. Kami juga dapat menambahkan beberapa animasi dan warna ke bilah pencarian dengan menggunakan properti CSS

Artikel yang Direkomendasikan

Ini adalah panduan untuk Bar Pencarian HTML. Di sini kita membahas bagaimana bilah pencarian di HTML bekerja dengan contoh untuk diterapkan dengan kode dan keluaran yang tepat. Anda juga dapat membaca artikel terkait lainnya untuk mempelajari lebih lanjut –

Bagaimana cara mencari sesuatu di file HTML?

Bagaimana Anda mencari halaman dalam HTML?

Bagaimana Anda mencari kata dalam kode HTML?

Bagaimana cara menambahkan mesin pencari di HTML?