Membuat Form Pencarian yang Elegan dengan CSS3
Form pencarian merupakan salah satu elemen UI yang paling umum digunakan, dan saya kira tidak perlu dijelaskan tentang kegunaannya. Entah itu pada sebuah website atau aplikasi berbasis web, Anda perlu membuat field pencarian tampil lebih bagus, intuitif, dan juga elegan untuk meningkatkan user experience.
Hari ini, kita akan belajar bagaimana membuat kotak pencarian yang bagus menggunakan CSS3 beserta pseudo-element.
Kode HTML
Mark up yang kita gunakan sangat sederhana, tidak neko-neko, dan ora umum!
<form class="form-wrapper cf">
<input type="text" />
<button>Cari</button>
</form>
Anda mungkin memperhatikan atribut HTML5 seperti placeholder dan required, berikut penjelasan singkat tentang atribut-atribut ini:
- placeholder - atribut ini menampilkan teks pada kotak pencarian jika sedang tidak berada pada kondisi focus, dan akan menyembunyikan teks tersebut jika pengguna sedang fokus berada pada kotak pencarian.
- required - sebagai penanda bahwa elemen tersebut merupakan bagian yang wajib diisi dari sebuah form.
HTML5 juga menghadirkan sebuah nilai baru untuk type atribute yaitu: type=”search”. Karena inkonsistensi pada beberapa browser, kita tidak akan menggunakan fitur ini.
Elemen HTML seperti img dan input tidak memuat konten, sehingga pseudo-element seperti :before tidak akan berfungsi. Oleh karena itu pada artikel ini kita akan mengganti input untuk submit menjadi button. Dengan cara ini, kita tetap dapat menggunakan fungsi Enter untuk pengiriman form.
Kode CSS
Untuk keperluan float-clearing.
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
Styling elemen pada form.
/* Form wrapper */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* menghilangkan kelebihan spacing pada button di Mozilla Firefox */
border: 0;
padding: 0;
}
Selesai. Selamat mencoba!
Sunber: http://speckyboy.com
Untuk menganti warna tombol searchnya kira2 bagaimana ya ?
terima kasih, ijin membookmark postingan anda ini
Terima Kasih Banyak Gan
Sangat Membantu ane
Thank’s gan dah share info.nya. Ni sangat membantu ane banget gan….
mantap bro…