Percantik Form Pencarian dengan CSS

Template Landing Page untuk Blogspot

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 😉

Baca Juga:  Transparansi file PNG di IE6

Tags

mempercantik html,mempercantik form dengan css,mempercantik web,membuat form input dengan css,form dengan css,memperindah html,mempercantik website,mempercantik tampilan form dengan css,css pencarian,mempercantik form html,mempercantik form input dengan css,membuat form search dengan css,cara mempercantik website,mempercantik form php,form search css,membuat search dengan css,membuat search dengan HTML,membuat form pencarian dengan css,mempercantik form login dengan css,memperindah form dengan css

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 kocaeli escort