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 :
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
Penyelarasan alami hanya menggunakan satu gambar untuk tombol dan kolom masukan
Kelas semu :focus mendukung browser yang menambahkan efek hover ke tombol.
HTML
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
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. ***/
}