Percantik Form Pencarian dengan CSS

From pencarian biasanya itu-itu saja, sehingga kadang membuat kita bosan, pada tutorial kali ini Saya mencoba untuk mempercantik form pencarian menggunakan CSS, CSS memang menjadi andalan para webdesigner untuk mempercantik, memperindah dan lainnya.

[related_posts]

Sekarang saya akan membuat form pencarian seperti ini :

Sekarang kita lihat code HTML dan CSS-nya

HTML

<div class="box-cari">
    <form method="get" id="searchform" action="">
        <input type="text" value="" name="s" id="s" class="txt-search" />
        <input type="image" id="searchsubmit" class="btn-search" src="tombol.jpg" />
    </form>
</div>

CSS

.box-cari {
    width: 281px;
    height: 46px;
    margin: 0 auto;
}
#searchform {
    width: 281px;
    height: 46px;
    background: url(bg-pencarian.jpg) no-repeat;
    margin-top: 10px;
}
.txt-search {
    float: left;
    height: 27px;
    width: 214px;
    background: none;
    border: none;
    margin-left: 10px;
    color: #333;
    margin-top: 10px;
}
#searchsubmit {
    width: 57px;
    height: 46px;
}

Done! ini teknik yang sering saya gunakan untuk form pencarian sederhana, jika teman-teman punya teknik lain mari kita share disini 😉

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

grain storage instagram türk takipçi satın al