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:  Menggunakan CSS3 Media Queries untuk Menentukan Target di iPad & iPhone

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 form pencarian dengan css,membuat search dengan HTML,mempercantik form login dengan css,membuat search dengan css,cara mempercantik web html

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 hd porno izle turk porno