Pada artikel ini kursus html private online akan membagikan tutorial tentang Cara Membuat Expand Search Dengan HTML CSS. Inputan search atau fitur pencarian tentu sangat penting dalam sebuah sistem yang dibuat, karena sangat membantu penggunanya. Pada kasus ini saya membahas tampilan fitur expand search. Jadi nanti tampilan yang dibuat menggunakan sebuah Icon dimana saat di klik muncul form pencarian.
Baiklah langsung saja kita membuatnya yuk simak langkah-langkah seperti berikut:
Langkah pertama, sahabat buka teks editor untuk mengetikkan code HTML dibawah ini:
<form> <input type="text" class="searchbox" autocomplete="off" placeholder="Silahkan Mencari..."> </form>
jadi tag html yang digunaakan yaitu form dan input
Langkah berikutnya tentu Style CSS agar terlihat efek Expand dari inputannya, silahkan ikuti code CSS berikut yah sobat kursus html private online:
body{background: #594848;}
form{
margin:0;
padding: 0;
top:50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.searchbox{
color: #575757;
position: relative;
transition: z-index 0.8s, width 0.5s, background 0.3s ease, border 0.3s;
height: 60px;
width: 0;
margin:0;
padding: 5px 0 10px 50px;
box-sizing: border-box;
font-size: 20px;
cursor: pointer;
border:none;
border-radius: 30px;
background: url(icons-search.png) no-repeat left 15px center transparent;
background-size: 30px;
}
.searchbox:focus{
z-index: 3;
width: 400px;
border:2px solid #e25230;
background: #feffef;
outline: none;
cursor: auto;
padding-right: 10px;
}
Jadi style CSS saya menyisipkan image icons-search.png ,nanti bisa sahabat ganti sesuai selera kalian. kemudian saat image icon di klik maka akan tampil sebuah inputan , silahkan perhatikan pada properti class= searchbox:focus menampilkan form input.
Oke jika sudah simpan lalu buka pada browser sahabat lihat hasilnya akan seperti ini:
Kami kursus privat html online rasa cukup dalam pembahasan kali ini Cara Membuat Expand Search Dengan HTML CSS, semoga bermanfaat dan sampai jumpa
terima kasih