Hari ini saya akan memperkenalkan cara menggunakan gambar latar belakang di CSS untuk mendesain kotak pencarian Anda. Saya telah menggunakan metode lain untuk mengimplementasikan formulir dan kotak pencarian saya sebelumnya, namun metode ini tampaknya lebih mudah, jadi saya pikir saya akan membaginya dengan siapa saja yang tertarik.
Lihat Demo
metode asli Pertama mari kita lihat metode asli saya menggunakan <input type="image" src="image_url" />:
<form method="get" id="searchform" action=" http:/ / www.sohtanaka.com/ ">
<kumpulan bidang>
<masukan tipe="teks" nilai="" nama="s" id="s" />
<input type="image" src="img_url" id="searchsubmit" value="Search" class="btn" />
</set bidang>
</form>Kelihatannya bagus, tapi ada kelemahannya. Tombol gambar tidak sejajar dengan kotak pencarian. Saya harus menggunakan atribut margin-top negatif untuk memperbaiki bug ini.
metode asli
Dalam versi metode yang ditingkatkan ini, saya memutuskan untuk tidak menggunakan type="image" tetapi menggunakan tag <button> dan kemudian menambahkan latar belakang menggunakan CSS. Hal ini memungkinkan kotak masukan teks dan tombol disejajarkan secara otomatis. Saya juga menambahkan :focus pseudo-class ke efek akhir (IE tidak akan mendukung ini, jadi saya menambahkan gaya khusus untuk IE untuk menyembunyikan efek ini). Berikut adalah beberapa keuntungan dari pendekatan ini:
Penyelarasan alami hanya menggunakan satu gambar untuk tombol dan kolom masukan
Kelas semu :focus mendukung browser yang menambahkan efek hover ke tombol.
HTML
<form method="get" id="searchform" action=" http://www.sohtanaka.com/ ">
<fieldset kelas="pencarian">
<masukan tipe="teks" kelas="kotak" />
<button class="btn" title="Kirim Penelusuran">Telusuri</button>
</set bidang>
</form>CSS
fieldset.pencarian {
perbatasan: tidak ada;
lebar: 243 piksel;
margin: 0 otomatis;
latar belakang: #222;
}
masukan .pencarian, tombol .pencarian {
perbatasan: tidak ada;
mengapung: kiri;
}
.masukan pencarian.kotak {
warna: #fff;
ukuran font: 1.2em;
lebar: 190 piksel;
tinggi: 30 piksel;
bantalan: 8px 5px 0;
latar belakang: #616161 url(search_bg.gif) tanpa pengulangan;
margin-kanan: 5px;
}
.masukan pencarian.kotak:fokus {
latar belakang: #616161 url(search_bg.gif) tanpa pengulangan di kiri -38px;
garis besar: tidak ada;
}
.tombol pencarian.btn {
lebar: 38 piksel;
tinggi: 38 piksel;
kursor: penunjuk;
indentasi teks: -9999px;
latar belakang: #fbc900 url(search_bg.gif) tidak ada pengulangan di kanan atas;
}
.tombol pencarian.btn:hover {
latar belakang: #fbc900 url(search_bg.gif) tidak ada pengulangan di kanan bawah;
}Komentar khusus IE
<!--[jika lte IE 7]>
<link rel="stylesheet" type="teks/css" href="ie.css" />
<![endif]-->IE style-ie.css
Seorang teman berkomentar bahwa IE6 dan IE7 akan menggulir gambar latar belakang secara horizontal jika Anda memasukkan terlalu banyak teks, jadi pendekatan saya adalah menggunakan gambar latar belakang terpisah khusus untuk IE, dan alih-alih menyelaraskannya ke kiri, saya membaliknya dan menyelaraskan latar belakang gambar di sebelah kanan.
.masukan pencarian.kotak {
latar belakang: url(search_bg_ie.gif) tidak ada pengulangan di kanan bawah;
/* Gambar latar belakang independen khusus untuk IE, dan gambar ini harus rata kanan. ***/
}