How to Make Easy Full Stylish Form Search Box - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title How to Make Easy Full Stylish Form Search Box, we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article CSS3, Article HTML, Article Resource, Article Tutorial, we write this you can understand. Well, happy reading.

Title : How to Make Easy Full Stylish Form Search Box
link : How to Make Easy Full Stylish Form Search Box

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

Thus articles How to Make Easy Full Stylish Form Search Box

that is all articles How to Make Easy Full Stylish Form Search Box This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article How to Make Easy Full Stylish Form Search Box with the link address https://autopostingblogspot.blogspot.com/2016/12/how-to-make-easy-full-stylish-form.html