Cara menggunakan kolom pencarian html

Dalam tutorial ini, saya ingin menjelajahi bagaimana Anda dapat mempercantik formulir pencarian sederhana. Kami tidak akan melakukan sesuatu yang gila, melainkan menjelajahi empat cara berbeda yang dapat Anda gunakan untuk merapikan input penelusuran dengan bantuan transisi CSS

Anda Sudah Memiliki Kebijakan di Kotak Pencarian

Di file HTML, Anda perlu membuat input pencarian untuk memulai. Jika Anda melihat kode di bawah ini, Anda akan melihat empat hal berbeda. div

      <span class="icon"><i class="fa fa-search"></i></span>
_80 , div.
      <span class="icon"><i class="fa fa-search"></i></span>
81 ,
      <span class="icon"><i class="fa fa-search"></i></span>
82, dan masukan pencarian itu sendiri

1
<div class="box">
2
  <div class="container-1">
3
_
      <span class="icon"><i class="fa fa-search"></i></span>
4
      <input type="search" id="search" placeholder="Search..." />
5
  </div>
<div class="box">
0
<div class="box">
1

Keempat contoh akan memiliki kotak pencarian - alami - serta kelas ikon pencarian. Masing-masing dari empat contoh akan ditempatkan dalam wadah sehingga kita dapat memanipulasi masukan pencarian secara mandiri. Terakhir, kotak div bertanggung jawab untuk menjaga wadah tetap di tengah

Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html

Menambahkan Font Keren

Font Awesome adalah pustaka ikon. Anda dapat mempelajari lebih lanjut tentang proyek ini di situs web Font Awesome

1
<div class="box">
_3

Cuplikan kode di atas adalah salah satu contoh bagaimana Anda dapat menyertakan ikon di markup Anda. Namun, agar ikon muncul, Anda juga perlu menyertakan tautan pustaka Font Awesome, yang ditunjukkan dalam cuplikan di bawah. Sisipkan tautan ini ke kepala dokumen Anda

1
<div class="box">
_5

Gaya Dasar

Kami sekarang akan menambahkan beberapa gaya ke lembar gaya terpisah (yang juga perlu Anda tautkan ke kepala dokumen)

1
<div class="box">
7
2
<div class="box">
9
3
5_______1
4
5
2
4
<div class="box">
0
2
6
2
7
2
8
2
9
  <div class="container-1">
0____1____6_____5

Di atas cuplikan CSS kami menambahkan beberapa gaya dasar ke halaman. Gaya kotak pencarian akan menjadi biru tua sehingga latar belakang tubuh tidak harus putih polos. Kotak kelas juga dipusatkan ke halaman tutorial

Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html

Hiasi Kotak Pencarian

Tutorial ini adalah tentang mempelajari cara mempercantik kotak pencarian. Dalam contoh pertama ini saya akan menjelaskan apa yang terjadi secara lebih rinci; . Dalam tiga contoh lainnya, saya hanya akan menunjukkan cara mencapai berbagai transisi

#1. Latar Belakang Memudar

Contoh pertama yang akan kami tangani adalah mengubah latar belakang input pencarian saat melayang. Kami juga akan menambahkan transisi agar perubahannya tidak tiba-tiba

HTML

Anda telah melihat markup HTML dasar. Cuplikan ini akan serupa untuk semua contoh

1
<div class="box">
2
  <div class="container-1">
3
_
      <span class="icon"><i class="fa fa-search"></i></span>
4
      <input type="search" id="search" placeholder="Search..." />
5
  </div>
<div class="box">
0
<div class="box">
1

CSS

Untuk memulai penataan, kita perlu menentukan gaya CSS dari kotak pencarian itu sendiri. Mari tambahkan aturan CSS yang diperlukan satu per satu sehingga Anda tahu persis apa yang terjadi

1
3
6
2
2
8
3
0_______0
4
      <span class="icon"><i class="fa fa-search"></i></span>
2
5
      <span class="icon"><i class="fa fa-search"></i></span>
4
<div class="box">
0
2
1

Pertama, kita akan memberi style pada kelas container. Bisa dibilang properti yang paling penting adalah

      <span class="icon"><i class="fa fa-search"></i></span>
83. Ini diatur secara khusus sehingga ikon dapat ditempatkan di atas input seperti yang akan Anda lihat sebentar lagi

1
      <span class="icon"><i class="fa fa-search"></i></span>
8
2
2
8
3
  <div class="container-1">
0
4
4
4
5
4
6
<div class="box">
0
4
8
2
7
      <input type="search" id="search" placeholder="Search..." />
0
2
9
      <input type="search" id="search" placeholder="Search..." />
2
  <div class="container-1">
1
      <input type="search" id="search" placeholder="Search..." />
4
      <input type="search" id="search" placeholder="Search..." />
5
      <input type="search" id="search" placeholder="Search..." />
6
      <input type="search" id="search" placeholder="Search..." />
7
      <input type="search" id="search" placeholder="Search..." />
8
      <input type="search" id="search" placeholder="Search..." />
9
5
0
5
1
2
1

Memasukkan

Selanjutnya, kami akan memberi gaya pada input yang sebenarnya. Segala sesuatu di atas murni estetika sebagai radius batas atau warna latar belakang dan tidak memengaruhi fungsi input. Catat properti padding kiri. Ini ada untuk memberi ruang bagi ikon sehingga tidak benar-benar berada di atas teks di masukan

Di bawah ini kami memiliki empat aturan berbeda untuk warna teks placeholder, dalam contoh kami adalah Penelusuran. Aturan sayangnya harus terpisah untuk setiap vendor awalan dan tidak dapat digabungkan menjadi aturan penulisan steno. Ini sedikit mengganggu dan Anda akan melihat ini berulang di setiap contoh

1
5
4
2
5
6
3
2
1
4
5
  </div>
1
<div class="box">
0
  </div>
3
2
7
2
1
2
9
  <div class="container-1">
1
  </div>
8
      <input type="search" id="search" placeholder="Search..." />
5
  </div>
3
      <input type="search" id="search" placeholder="Search..." />
7
2
1
      <input type="search" id="search" placeholder="Search..." />
9
5
1
<div class="box">
05
<div class="box">
06
  </div>
3
<div class="box">
08
2
1

Ikon

Terakhir, kita akan menata ikonnya. Yang terpenting kita atur posisinya agar diletakkan di atas input dengan menyetelnya menjadi _______0_______84. Margin membantu posisi ikon dalam pengaturan tambahan posisinya hingga

      <span class="icon"><i class="fa fa-search"></i></span>
85

Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html

1
<div class="box">
11
2
<div class="box">
13
3
<div class="box">
15
4
<div class="box">
17
5
<div class="box">
19
<div class="box">
0
<div class="box">
21
2
7
<div class="box">
23
2
_9______1

Menambahkan Efek Melayang

Beberapa aturan berikutnya yang harus kita buat adalah apa yang terjadi pada hover kotak pencarian. Dalam contoh ini kami hanya ingin mengubah warna latar belakang. Untuk menghindari warna kuning atau biru di sekitar masukan (browser terkadang menambahkannya) atur

      <span class="icon"><i class="fa fa-search"></i></span>
86

1
<div class="box">
27
2
<div class="box">
29
3
<div class="box">
31
4
<div class="box">
33

Seperti yang Anda lihat di cuplikan di atas, kami telah menambahkan dua bagian tambahan –

      <span class="icon"><i class="fa fa-search"></i></span>
87 dan
      <span class="icon"><i class="fa fa-search"></i></span>
88. Dengan cara ini efeknya tidak akan hilang saat Anda berhenti mengarahkan kursor ke input. Lebih penting lagi, efeknya juga menonjol saat input digunakan

Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html

Membuat Transisi

Untuk membuat transisi terjadi, kita perlu menambahkan beberapa baris kode. Kembalikan semua ke aturan di mana kita mendefinisikan gaya dari input -

      <span class="icon"><i class="fa fa-search"></i></span>
89
      <span class="icon"><i class="fa fa-search"></i></span>
90. Sebelum tanda kurung tutup tambahkan potongan berikut

1
<div class="box">
35
2
<div class="box">
37
3
<div class="box">
39
4
<div class="box">
41
5
<div class="box">
43

Kami mendefinisikan properti transisi secara singkat, tetapi kami juga dapat menentukan tiga parameter secara individual. Pertama, kami mengatakan bahwa transisi seharusnya hanya memengaruhi properti latar belakang. Selanjutnya, kami mengatakan transisi harus dilakukan lebih dari setengah detik. Terakhir, kami mendefinisikan efek transisi yang akan berkurang.

      <span class="icon"><i class="fa fa-search"></i></span>
_91 bukan satu-satunya efek yang akan berhasil di sini, kita juga dapat menggunakan
      <span class="icon"><i class="fa fa-search"></i></span>
92 atau
      <span class="icon"><i class="fa fa-search"></i></span>
93, misalnya. Itu hanya akan terlihat sedikit berbeda. Lebih baik coba sendiri untuk melihat apakah Anda menyukainya

Gaya input saat ini akan terlihat seperti kode di bawah ini

1
      <span class="icon"><i class="fa fa-search"></i></span>
8
2
2
8
3
  <div class="container-1">
0
4
4
4
5
4
6
<div class="box">
0
4
8
2
7
      <input type="search" id="search" placeholder="Search..." />
0
2
9
<div class="box">
59
  <div class="container-1">
1
      <input type="search" id="search" placeholder="Search..." />
4
      <input type="search" id="search" placeholder="Search..." />
5
      <input type="search" id="search" placeholder="Search..." />
6
      <input type="search" id="search" placeholder="Search..." />
7
      <input type="search" id="search" placeholder="Search..." />
8
      <input type="search" id="search" placeholder="Search..." />
9
5
0
5
1
<div class="box">
06
<div class="box">
70
<div class="box">
08
<div class="box">
72
<div class="box">
73
<div class="box">
74
<div class="box">
75
<div class="box">
76
<div class="box">
77
<div class="box">
78
<div class="box">
79
<div class="box">
80
<div class="box">
81
2
1

Bagaimana Cara Kerja Transisi CSS?

Jika Anda tidak tahu apa-apa tentang transisi CSS, izinkan saya memberi Anda ikhtisar singkat. Pertama, agar transisi berfungsi, properti perlu ditentukan dalam status default dan bukan pada hover, atau aktif atau fokus

Transisi CSS memungkinkan perubahan bertahap dan Anda dapat menentukan parameter tertentu untuk dikontrol, seperti properti mana yang akan terpengaruh, durasi transisi, dan jenis transisi. Anda dapat mengatur beberapa transisi untuk satu elemen. Namun yang terpenting, Anda harus selalu menyertakan awalan vendor untuk mengakomodasi berbagai browser, karena dukungan untuk properti ini belum universal

Untuk informasi lebih lanjut silahkan lihat di. Transisi CSS3 Dan Transformasi Dari Awal

#2. Luaskan Input saat Arahkan

Dalam contoh ini, pencarian akan dimulai seperti ikon kaca. Saat Anda mengarahkan kursor ke atas ikon, pencarian akan diperluas pada titik mana Anda dapat mengetikkan permintaan Anda. Sebagian besar kode dalam contoh ini akan sangat mirip dengan contoh sebelumnya

HTML

________3__4_______84

2
<div class="box">
86
3
<div class="box">
88
4
________4______90
5
<div class="box">
92
<div class="box">
0
<div class="box">
94

CSS

1
<div class="box">
96
2
2
8
3
      <span class="icon"><i class="fa fa-search"></i></span>
0
4
      <span class="icon"><i class="fa fa-search"></i></span>
2
5
      <span class="icon"><i class="fa fa-search"></i></span>
4
<div class="box">
0
2
1

Input gaya untuk transisi ini berbeda. Input secara signifikan lebih kecil sehingga ikon dapat dilihat di belakang kotak. Semua properti yang tersisa, seperti latar belakang atau warna font, sama seperti kita tidak ingin mengubah gaya pencarian sepenuhnya

1
2
08
2
2
10
3
  <div class="container-1">
0
4
4
4
5
4
6
<div class="box">
0
4
8
2
7
      <input type="search" id="search" placeholder="Search..." />
0
2
9
<div class="box">
59
  <div class="container-1">
1
2
24
      <input type="search" id="search" placeholder="Search..." />
5
      <input type="search" id="search" placeholder="Search..." />
6
      <input type="search" id="search" placeholder="Search..." />
7
      <input type="search" id="search" placeholder="Search..." />
8
      <input type="search" id="search" placeholder="Search..." />
9
5
0
5
1
2
32
<div class="box">
06
<div class="box">
08
2
35
<div class="box">
73
2
37
<div class="box">
75
2
39
<div class="box">
77
2
41
<div class="box">
79
2
43
<div class="box">
81
2
1

Seperti yang Anda lihat, saya telah mendefinisikan ulang properti transisi hanya untuk memengaruhi lebarnya. Saya telah menghemat waktu yang sama, karena cukup cepat untuk tidak mengganggu pengguna, tetapi cukup lama untuk memberikan efek yang bagus

Berikut ini adalah kode untuk mewarnai ulang teks placeholder

1
2
47
2
5
6
3
2
1
4
5
2
54
<div class="box">
0
  </div>
3
2
7
2
1
2
9
  <div class="container-1">
1
2
61
      <input type="search" id="search" placeholder="Search..." />
5
  </div>
3
      <input type="search" id="search" placeholder="Search..." />
7
2
1
      <input type="search" id="search" placeholder="Search..." />
9
5
1
2
68
<div class="box">
06
  </div>
3
<div class="box">
08
2
1

Dan sekali lagi kami memiliki gaya ikon CSS. Ini harus sama seperti pada contoh sebelumnya

1
2
74
2
<div class="box">
13
3
<div class="box">
15
4
<div class="box">
17
5
<div class="box">
19
<div class="box">
0
<div class="box">
21
2
7
<div class="box">
23
2
_9______1

Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html

Menambahkan Efek Melayang

Hal terakhir yang perlu kita lakukan adalah menentukan bagaimana pencarian akan terlihat ketika kursor diarahkan ke atasnya. Pada cuplikan di bawah ini, aturan pertama adalah memastikan bahwa formulir tidak memiliki cahaya yang disebabkan oleh browser dan saat Anda menggunakan input - saat mengetik di dalamnya - kotak pencarian tetap lebar. Pengaturan tengah hanya memperluas input ke lebar penuh saat melayang

1
2
90
2
2
92
3
2
8________9___
2
1____111______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________g

Hal terakhir yang terjadi pada kode di atas adalah ikon berubah warna saat melayang. Ini hanyalah detail kecil untuk segera menunjukkan kepada pengguna bahwa kotak telusur aktif dan berfungsi, bukan input yang rusak. Perubahan tidak dilakukan dengan transisi

Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html

#3. Perbesar Ukuran Ikon saat Hover

Dari keempat contoh tersebut, yang satu ini adalah yang paling halus, baik dari segi kode maupun efek visual. Dalam hal ini ikon kaca yang terlihat akan muncul sedikit dan bertambah besar

HTML

Sekali lagi markup HTML dari ikon dan kotak pencarian sama dengan dua contoh sebelumnya. Kecuali, tentu saja, adalah _______0________94

1
<div class="box">
2
  <div class="container-1">
14
3
      <span class="icon"><i class="fa fa-search"></i></span>
4
      <input type="search" id="search" placeholder="Search..." />
5
  </div>
<div class="box">
0
<div class="box">
1

CSS

CSS untuk contoh ini tidak ada yang istimewa. Sebagian besar dimulai sangat mirip dengan contoh pertama di mana keadaan default tidak berbeda sama sekali. Berikut adalah kode untuk wadah dan masukan. Perhatikan bahwa tidak ada transisi pada input kali ini

1
  <div class="container-1">
24
2
2
8
3
      <span class="icon"><i class="fa fa-search"></i></span>
0
4
      <span class="icon"><i class="fa fa-search"></i></span>
2
5
      <span class="icon"><i class="fa fa-search"></i></span>
4
<div class="box">
0
2
1
2
7
2
9
  <div class="container-1">
37
  <div class="container-1">
1
2
8
      <input type="search" id="search" placeholder="Search..." />
5
  <div class="container-1">
0
      <input type="search" id="search" placeholder="Search..." />
7
4
4
      <input type="search" id="search" placeholder="Search..." />
9
4
6
5
1
4
8
<div class="box">
06
      <input type="search" id="search" placeholder="Search..." />
0
<div class="box">
08
<div class="box">
59
<div class="box">
73
      <input type="search" id="search" placeholder="Search..." />
4
<div class="box">
75
      <input type="search" id="search" placeholder="Search..." />
6
<div class="box">
77
      <input type="search" id="search" placeholder="Search..." />
8
<div class="box">
79
5
0
<div class="box">
81
2
32
  <div class="container-1">
62
2
1

Sekali lagi kami memiliki aturan placeholder

1
  <div class="container-1">
65
2
5
6
3
2
1
4
5
  <div class="container-1">
72
<div class="box">
0
  </div>
3
2
7
2
1
2
9
  <div class="container-1">
1
  <div class="container-1">
79
      <input type="search" id="search" placeholder="Search..." />
5
  </div>
3
      <input type="search" id="search" placeholder="Search..." />
7
2
1
      <input type="search" id="search" placeholder="Search..." />
9
5
1
  <div class="container-1">
86
<div class="box">
06
  </div>
3
<div class="box">
08
2
1

Nah, dengan tampilan seperti itu, ikon untuk contoh ini juga sama. Ini warna yang sama, posisi yang sama dan seterusnya. Namun, saya telah menambahkan transisi untuk itu. Transisi ini menargetkan semua properti, yang merupakan pendekatan yang lebih singkat daripada mengejanya satu per satu

1
  <div class="container-1">
92
2
<div class="box">
13
3
<div class="box">
15
4
<div class="box">
17
5
<div class="box">
19
<div class="box">
0
<div class="box">
21
2
7
<div class="box">
23
2
9
  <div class="container-1">
1
3
07
      <input type="search" id="search" placeholder="Search..." />
5
3
09
      <input type="search" id="search" placeholder="Search..." />
7
3
11
      <input type="search" id="search" placeholder="Search..." />
9
3
13
5
1
3
15
<div class="box">
06
2
1

Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html

Menambahkan Efek Melayang

1
3
19
2
3
21
3
2
1
4
5
3
26
<div class="box">
0
3
28
2
7
  <div class="container-1">
08
2
9
  <div class="container-1">
1
3
33
      <input type="search" id="search" placeholder="Search..." />
5
3
35
      <input type="search" id="search" placeholder="Search..." />
7
3
37
      <input type="search" id="search" placeholder="Search..." />
9
3
39
5
1
3
41
<div class="box">
06
<div class="box">
33

Ada beberapa hal yang terjadi pada kode di atas. Pertama, kami mengubah warna ikon pada hover dan memindahkannya sedikit lebih tinggi sehingga terpusat secara vertikal saat lebih besar. Kedua, kita menambahkan transformasi ke elemen icon pada hover sehingga akan menjadi 1,5 kali ukuran aslinya. Karena transisi yang ditentukan sebelumnya disetel untuk memengaruhi semua properti, tampaknya ukuran ikon bertambah ke dalam saat diarahkan

Sekali lagi, lihat Transisi CSS3 Dan Transformasi Dari Awal untuk mempelajari lebih lanjut tentang properti transformasi

Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html

#4. Arahkan ke Tombol

Berbeda dengan tiga contoh terakhir, yang satu ini akan lebih kompleks. Saat mengarahkan kursor, tombol akan meluncur di atas masukan agar Anda dapat melanjutkan - seperti Kirim atau Buka. Tombol tersebut akan memiliki ikon kaca yang terlihat di dalamnya

HTML

1
<div class="box">
2
3
47
3
3
49
4
3
51
5
  </div>
<div class="box">
0
<div class="box">
1

Di sini HTML sedikit berbeda. Input masih ada, tentu saja, tetapi ikonnya sekarang ada di dalam elemen tombol yang muncul setelah input. Tombol ini penting setelah input karena terkait dengan efek hover yang akan dibuat di CSS

Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html

CSS

CSS dalam contoh ini berbeda jadi harap diperhatikan. Di bawah ini adalah cuplikan untuk gaya wadah. Pertama, _______0________83 hilang; . Namun, kami memiliki _______0________96. Ini membuat tombol tidak muncul saat tidak di hover. Secara teknis tombol popup ada di sebelah kanan input, tetapi berkat _______0_______96, tombol popup tidak terlihat saat berada di luar lebar wadah dan lebar inputnya sama

1
3
57
2
3
59
3
2
8
4
      <span class="icon"><i class="fa fa-search"></i></span>
0
5
      <span class="icon"><i class="fa fa-search"></i></span>
2
<div class="box">
0
2
1

Di bawah ini adalah input yang tidak memiliki transisi karena kali ini bukan elemen yang terpengaruh

1
3
69
2
2
8
3
  <div class="container-1">
0
4
4
4
5
4
6
<div class="box">
0
4
8
2
7
      <input type="search" id="search" placeholder="Search..." />
0
2
9
2
32
  <div class="container-1">
1
3
85
      <input type="search" id="search" placeholder="Search..." />
5
      <input type="search" id="search" placeholder="Search..." />
6
      <input type="search" id="search" placeholder="Search..." />
7
      <input type="search" id="search" placeholder="Search..." />
8
      <input type="search" id="search" placeholder="Search..." />
9
5
0
5
1
2
1

Cuplikan untuk mengubah warna placeholder berikutnya

1
3
95
2
5
6
3
2
1
4
5
      <span class="icon"><i class="fa fa-search"></i></span>
02
<div class="box">
0
  </div>
3
2
7
2
1
2
9
  <div class="container-1">
1
      <span class="icon"><i class="fa fa-search"></i></span>
09
      <input type="search" id="search" placeholder="Search..." />
5
  </div>
3
      <input type="search" id="search" placeholder="Search..." />
7
2
1
      <input type="search" id="search" placeholder="Search..." />
9
5
1
      <span class="icon"><i class="fa fa-search"></i></span>
16
<div class="box">
06
  </div>
3
<div class="box">
08
2
1

Berikut ini adalah kode untuk gaya tombol yang muncul di hover. Trik untuk membuatnya meluncur dari samping adalah dengan menempatkannya tepat di belakang input, dan membuatnya tidak terlihat kecuali saat melayang. Kenop adalah elemen yang berubah - bergerak - oleh karena itu, di mana transisi ditentukan. Untuk kesederhanaan, saya telah mengidentifikasi transisi untuk memengaruhi semua properti

1
      <span class="icon"><i class="fa fa-search"></i></span>
22
2
      <span class="icon"><i class="fa fa-search"></i></span>
24
3
      <span class="icon"><i class="fa fa-search"></i></span>
26
4
      <span class="icon"><i class="fa fa-search"></i></span>
28
5
      <span class="icon"><i class="fa fa-search"></i></span>
30
<div class="box">
0
      <span class="icon"><i class="fa fa-search"></i></span>
32
2
7
      <span class="icon"><i class="fa fa-search"></i></span>
34
2
9
  <div class="container-1">
1
4
6
      <input type="search" id="search" placeholder="Search..." />
5
      <span class="icon"><i class="fa fa-search"></i></span>
39
      <input type="search" id="search" placeholder="Search..." />
7
  <div class="container-1">
0
      <input type="search" id="search" placeholder="Search..." />
9
2
10
5
1
<div class="box">
23
<div class="box">
06
      <span class="icon"><i class="fa fa-search"></i></span>
47
<div class="box">
08
4
8
<div class="box">
73
<div class="box">
75
      <span class="icon"><i class="fa fa-search"></i></span>
52
<div class="box">
77
3
09
<div class="box">
79
3
11
<div class="box">
81
3
13
  <div class="container-1">
62
3
15
      <span class="icon"><i class="fa fa-search"></i></span>
61
2
1

Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html

Menambahkan Efek Melayang

Agar tombol memudar, itu perlu dipindahkan ke input. Itu dilakukan melalui margin negatif. Sebelumnya opacity tombol kita atur ke

      <span class="icon"><i class="fa fa-search"></i></span>
98 jadi kita harus reset ke
      <span class="icon"><i class="fa fa-search"></i></span>
99 agar tombolnya terlihat juga

Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html

Perintah terakhir hanya mengubah latar belakang tombol jika Anda mengarahkan kursor ke tombol. Itu bagus untuk memberi tahu pengguna bahwa tombolnya aktif dan Anda dapat mengkliknya untuk mengirimkan pencarian;

1
      <span class="icon"><i class="fa fa-search"></i></span>
64
2
      <span class="icon"><i class="fa fa-search"></i></span>
66______7_______
      <span class="icon"><i class="fa fa-search"></i></span>
68
4
      <span class="icon"><i class="fa fa-search"></i></span>
70
5
<div class="box">
33
<div class="box">
0
2
7
      <span class="icon"><i class="fa fa-search"></i></span>
75________5______9_
      <span class="icon"><i class="fa fa-search"></i></span>
__7__3___4

Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html
Cara menggunakan kolom pencarian html

Kesimpulan

Nah, itu membawa kita ke akhir percobaan CSS kita. Kami mengambil input formulir pencarian dasar dan menggunakan beberapa opsi efek untuk mengubah perilakunya. Bagaimana lagi yang Anda sarankan untuk mengubah input pencarian seperti ini?