Hai , Selamat Datang di Dumet School disini kita akan  berbagi ilmu tentang bagaimana Cara Membuat Kotak Pencarian/Search dengan HTML CSS. Kotak pencarian atau Search Box adalah salah satu elemen UI yang paling penting pada halaman web.Dalam tutorial ini, kita akan belajar cara membuat kotak pencarian yang cantik dengan bantuan CSS (Cascading Style Sheets)
<html lang="en">
  <head>
     <meta charset="utf-8">
     <title>Judul Halaman Saya</title>
  </head>
<body>
<form>
   <input class="search" type="text" placeholder="Cari..." required>
   <input class="button" type="button" value="Cari">
</form>
</body>
</html>
Menggunakan CSS
<style type="text/css">
      form {
         width:500px;
         margin:50px auto;
      }
      .search {
         padding:8px 15px;
         background:rgba(50, 50, 50, 0.2);
         border:0px solid #dbdbdb;
      }
      .button {
         position:relative;
         padding:6px 15px;
         left:-8px;
transition:all 2s;
         border:2px solid #53bd84;
         background-color:#53bd84;
         color:#fafafa;
      }
      .button:hover  {
         background-color:#fafafa;
         color:#207cca;
      }
      ::-webkit-input-placeholder { /* For WebKit browsers */
         color:    #dd3333;
                  font-family:Helvetica Neue;
                  font-weight:bold;
      }
      :-moz-placeholder { /* For Mozilla Firefox 4 to 18 */
         color:    #dd3333;
                  font-family:Helvetica Neue;
                  font-weight:bold;
      }
      ::-moz-placeholder { /* For Mozilla Firefox 19+ */
         color:    #dd3333;
                  font-family:Helvetica Neue;
                  font-weight:bold;
      }
      :-ms-input-placeholder { /* For Internet Explorer 10+ */
         color:    #dd3333;
                  font-family:Helvetica Neue;
                  font-weight:bold;
      }
   </style>
Setelah Menggunakan CSS Hasilnya Akan seperti ini
Gimana hasilnya luar biasa kan? Selamat mencoba yang teman-teman.