Search Box Dengan Css

Dengan tampilan yang sederhana tapi elegant, style dari search box ini dibuat oleh Rethnaraj Rambabu, yang diadaptasi dari search box milik Apple dengan background warna gelap, karena menurut saya tampilannya yang simple nan elegant saya mencoba merubah search box tersebut dari berbagai warna background.


Jika tidak ada yang sesuai dengan background template yang kalian pergunakan, kalian bisa modifikasi pada bagian background search input dengan mengganti warnanya, jika kesulitan mencari warna yang cocok, bisa menggunakan tools warna pada bagian menu.

1. Search Box Warna Background Hijau
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3GqhuIpVESXFLkxIBU1fBJeTn9lKTeSgKqvCNxiYTeRdMaDSxMsCVY47Xys9bVegEbAy9WqMBR7Ys_n5Uq_S6e_K78Bh4jxjADmmXDA4nbM5TIt9SGjGcIPouAN-d4hLpHqkbHAeLEK8/s1600/cari.png) no-repeat 10px 6px #506D2C;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

2. Search Box Warna Background Biru
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3GqhuIpVESXFLkxIBU1fBJeTn9lKTeSgKqvCNxiYTeRdMaDSxMsCVY47Xys9bVegEbAy9WqMBR7Ys_n5Uq_S6e_K78Bh4jxjADmmXDA4nbM5TIt9SGjGcIPouAN-d4hLpHqkbHAeLEK8/s1600/cari.png) no-repeat 10px 6px #37627B;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

3. Search Box Warna Background Orange
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3GqhuIpVESXFLkxIBU1fBJeTn9lKTeSgKqvCNxiYTeRdMaDSxMsCVY47Xys9bVegEbAy9WqMBR7Ys_n5Uq_S6e_K78Bh4jxjADmmXDA4nbM5TIt9SGjGcIPouAN-d4hLpHqkbHAeLEK8/s1600/cari.png) no-repeat 10px 6px #BF6E18;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

4. Search Box Warna Background Hitam
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3GqhuIpVESXFLkxIBU1fBJeTn9lKTeSgKqvCNxiYTeRdMaDSxMsCVY47Xys9bVegEbAy9WqMBR7Ys_n5Uq_S6e_K78Bh4jxjADmmXDA4nbM5TIt9SGjGcIPouAN-d4hLpHqkbHAeLEK8/s1600/cari.png) no-repeat 10px 6px #5E5E5E;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

HTML

<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

Oleh : Situseo