سأقدم اليوم كيفية استخدام صور الخلفية في CSS لتصميم مربع البحث الخاص بك. لقد استخدمت طرقًا أخرى لتنفيذ النموذج ومربع البحث الخاص بي من قبل، ولكن يبدو أن هذه الطريقة أسهل، لذا فكرت في مشاركتها مع أي شخص مهتم.
عرض الطريقة الأصلية التجريبية
أولاً، دعونا نلقي نظرة على طريقتي الأصلية في استخدام <input type="image" src="image_url" />:
<formmethod="get" id="searchform" action=" http:/ / www.sohtanaka.com/ ">
<مجموعة الحقول>
<نوع الإدخال = "نص" قيمة = "" اسم = "s" معرف = "s" />
<input type = "image" src = "img_url" id = "searchsubmit" value = "بحث" class = "btn" />
</فيلدسيت>
</form>يبدو هذا جيدًا، ولكن هناك جانبًا سلبيًا لأن زر الصورة لا يتماشى مع مربع البحث، وكان علي استخدام سمة هامش أعلى سلبية لإصلاح هذا الخطأ.
الطريقة الأصلية
في هذه النسخة المحسنة من الطريقة، قررت عدم استخدام type = "image" ولكن استخدام العلامة <button> ثم إضافة الخلفية باستخدام CSS. يتيح ذلك لمربعات وأزرار إدخال النص محاذاة تلقائيًا. أضفت أيضًا فئة زائفة :focus إلى التأثير النهائي (لن يدعم IE هذا، لذلك أضفت نمطًا خاصًا لـ IE لإخفاء هذا التأثير). فيما يلي بعض فوائد هذا الأسلوب:
محاذاة طبيعية باستخدام صورة واحدة فقط للأزرار وحقول الإدخال
تدعم الفئة الزائفة :focus المتصفحات التي تضيف تأثيرات التمرير إلى الأزرار.
HTML
<طريقة النموذج = "الحصول على" معرف = "searchform" الإجراء = " http://www.sohtanaka.com/ ">
<fieldset class="search">
<نوع الإدخال = "نص" فئة = "مربع" />
<button class="btn" title="إرسال البحث">بحث</button>
</فيلدسيت>
</form>مجموعة حقول CSS
.البحث {
الحدود: لا شيء؛
العرض: 243 بكسل؛
الهامش: 0 تلقائي؛
الخلفية: #222؛
}
إدخال البحث، زر البحث {
الحدود: لا شيء؛
تعويم: يسار؛
}
مربع إدخال البحث {
اللون: #ففف؛
حجم الخط: 1.2em؛
العرض: 190 بكسل؛
الارتفاع: 30 بكسل؛
الحشو: 8 بكسل 5 بكسل 0؛
الخلفية: #616161 url(search_bg.gif) بدون تكرار;
الهامش الأيمن: 5 بكسل؛
}
.مدخل البحث.مربع:التركيز {
الخلفية: #616161 url(search_bg.gif) بدون تكرار لليسار -38px;
الخطوط العريضة: لا شيء؛
}
زر البحث.btn {
العرض: 38 بكسل؛
الارتفاع: 38 بكسل؛
المؤشر: المؤشر؛
المسافة البادئة للنص: -9999 بكسل؛
الخلفية: #fbc900 url(search_bg.gif) بدون تكرار أعلى اليمين؛
}
.زر البحث.btn:تحوم {
الخلفية: #fbc900 url(search_bg.gif) بدون تكرار أسفل اليمين؛
}تعليقات IE الخاصة
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->IE style-ie.css
علق أحد الأصدقاء بأن IE6 وIE7 سوف يقومان بتمرير صورة الخلفية أفقيًا إذا قمت بإدخال الكثير من النص، لذلك كانت طريقتي هي استخدام صورة خلفية منفصلة خصيصًا لـ IE، وبدلاً من محاذاتها إلى اليسار، قمت بقلبها ومحاذاة الخلفية الصورة إلى اليمين لإصلاح هذا.
مربع إدخال البحث {
الخلفية: url(search_bg_ie.gif) بدون تكرار في الأسفل الأيمن؛
/* صورة خلفية مستقلة خاصة بـ IE، ويجب أن تكون هذه الصورة محاذاة إلى اليمين. ***/
}