How to Make Easy Full Stylish Form Search Box

Sudah tiba lagi di penghujung tahun 2016, dan kita akan menyongsong tahun baru 2017! Semoga pada lembaran baru ini, semuanya berjalan dengan baik. Untuk menutup lembaran akhir two thousand and sixteen AA Koben akan berbagi tutorial lawas, ringan, tetapi full stylish :D yaitu tentang kotak pencarian or search form box
Kotak form pencarian sendiri kedudukannya pada sebuah weblog menurut ane sangatlah vital. Kadang suka jengkel ketika menemukan web-blog dengan konten menarik, akan tetapi apes tidak memiliki FORM Search Box #-o

Let's get this party started how to make form search box full stylish for styler blogger!
First of all don't forget to fully backup your template! If there is a mistake or do not like style of search box can be returned to the original :P
Letakan kode CSS pada tempatnya.

.kpb {
background: rgba(250,250,250,0.5) url('data:image/svg+xml;utf8,<svg focusable=\'false\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-17 -17 55 55\'><path d=\'M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\'></path></svg>') no-repeat right;
border: 1px solid #f0f0f0;
width: 212px;
color: #333;
padding: 13px 15px;
border-radius: 4px;
transition: all .3s;
}
.kpb:focus {
background: rgba(255,255,255,0.5) url('data:image/svg+xml;utf8,<svg focusable=\'false\' xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-17 -17 55 55\'><path d=\'M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\'></path></svg>') -19% 50% no-repeat;
outline: none;
color: #222;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);
}
.kpb:invalid + input[type="reset"].kpb_ {
display: none;
}
input[type="reset"].kpb_ {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAAKhJREFUeAGtkSkSAyEURPHo8fj4aDyXiEfj43OJ+Nxx9t+pl2X26Sp2+jWLa5rmUDkH0Cl05erWy5vnDShdeXUlLznN+LD9QQCvSWurCXPqypNhAgiSbbHfFLVgwDvWkhYIkCJTvlKLBTkCZu+JVD7yMkCpeBe/FhBhTHgXQiYBNxz5gnk+bqBh6hvDxBcCAgASssGmFHlCAqIdf0n85kLAVlVd8QIcKi0ErdubGmExugAAAABJRU5ErkJggg==');
background-position: center center;
background-repeat: no-repeat;
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
top: 0px;
left: -37px;
}

Harap di perhatikan link gambar, gue pakai technique penulisan/convert base64

Planning HTML

<form action="" method="get">
   <input type="text" name="q" required="required" placeholder="Search here..." class="kpb"/>
   <input type="reset" value="" class="kpb_"/>
</form>

DEMO: codepen.io/beben-koben/full/VmRGJX/

BONUS

CSS Stylish Search Box - Block Reveal Effects - Search Box with Suggestions Dropdown - 404 Parallax using CSS variables - Avatars, github's style - CodeMirror Theme Builder - Fancy Buttons with Amazing Hover Effects - Sticky Pointers - IMAGES SHADOWS EFFECT - Pagination Pure CSS - Drag and Drop Coloring - 3D card - HTML Arrows - Text Emoticon Generator

<:-P \m/ >:D< :-h