Kotak Pencarian CSS Dengan Ikon Di Dalam

sukma
sukma
3 minute read

Pelajari cara membuat kotak Pencarian CSS dengan Icon Inside. Kami akan membuat tiga contoh berbeda dari kotak pencarian yang memiliki ikon di dalam teks jenis masukan.

Setiap contoh dikodekan bersih dan berfungsi dengan baik di desktop dan juga di perangkat seluler. Desainnya juga bersih dan modern dengan sedikit CSS.

Kami tahu bahwa kotak telusur adalah yang paling penting untuk semua jenis situs web, tetapi pada saat yang sama kotak tersebut harus terlihat bagus dan memiliki animasi yang bagus.

Formulir pencarian default tidak datang dengan gaya apapun dan terlihat sangat mendasar. Dengan bantuan CSS & CSS3, kita dapat membuat teks input HTML dasar menjadi Desain Kotak Pencarian Bergaya.

Kita dapat dengan mudah membuatnya tampak luar biasa dan membuatnya menarik hanya dengan menambahkan beberapa baris CSS.

Selanjutnya, kita dapat menambahkan beberapa ikon ke tombol kotak pencarian seperti kita dapat menerapkan ikon kaca pembesar agar terlihat lebih baik.

Cara Membuat Kotak Pencarian CSS Dengan Ikon Di Dalam

Seperti yang kami katakan sebelumnya di tutorial keluar bahwa kami memiliki tiga contoh berbeda tetapi di sini saya akan menjelaskan kepada Anda yang pertama saja. Contoh lain bekerja serupa tetapi hanya struktur HTML dan gaya CSS yang berbeda.

Mari kita lihat markup dan kita akan memiliki pembungkus utama yang disebut b-example-1 dan di dalamnya, kita mendefinisikan pencarian nama kelas anak.

Selanjutnya, kita hanya akan menempatkan teks jenis input yang diajukan dengan beberapa teks placeholder. Setelah itu, kami akan menambahkan tombol dan menempatkan ikon di dalamnya.

Kami akan menggunakan ikon font yang mengagumkan yang ringan dan mudah digunakan, tetapi Anda dapat memilih orang lain.

<div class="sb-example-1">          <div class="search">             <input type="text" class="searchTerm" placeholder="What are you looking for?">             <button type="submit" class="searchButton">               <i class="fa fa-search"></i>            </button>          </div>       </div>

CSS

Langkah terpenting kami berikutnya untuk menata kotak pencarian jenis masukan. Kami akan mulai dengan pembungkus dan menerapkan lebar 100%. Anda dapat mengubahnya sesuai kebutuhan Anda.

Hal berikutnya kami akan menerapkan gaya di atas bidang teks. Kami akan menambahkan beberapa perbatasan, mengatur warna padding agar terlihat bagus.

Serupa, kami akan melakukan hal yang sama dengan properti tombol.

.sb-example-1 .search {   width: 100%;   position: relative;   display: flex; } .sb-example-1 .searchTerm {   width: 100%;   border: 3px solid #00B4CC;   border-right: none;   padding: 5px;   border-radius: 5px 0 0 5px;   outline: none;   color: #9DBFAF; } .sb-example-1 .searchTerm:focus{   color: #00B4CC; } .sb-example-1 .searchButton {   width: 40px;   height: 50px;   border: 1px solid #00B4CC;   background: #00B4CC;   text-align: center;   color: #fff;   border-radius: 0 5px 5px 0;   cursor: pointer;   font-size: 20px; }

Karena kita sudah menempatkan ikon di dalam elemen tombol jadi kita tidak perlu menyesuaikannya. Namun jika Anda ingin memperkecil ukurannya atau ingin mengubah warnanya, Anda dapat melakukannya dengan mudah menggunakan class berikut.

.sb-example-1 .searchButton i{   color: #0052cc; }

Itu dia.