• 0

كيف أضيف أيقونة على شكل مكبر بداخل حقل نصي؟

أريد إنشاء مربع للبحث، حيث يتوفر على حقل نصي بداخله أيقونة البحث، والتي عادة ما تكون على شكل مكبر:

MrhYG.thumb.png.01f308b669e46213bfaaadf6

ومن خلال الكود التالي:

<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />
<span id="g-search-button"></span>

حصلت على الحقل النصي، لكن الأيقونة لا تظهر، فما العمل؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

من الخصائص التي تُستعمل في ملف التنسيق css، خصائص التموضع: top,left,bottom و Right الهدف منها إزاحة العنصر بعدد من البيكسلات من جهة واحدة أو من جهات متعددة، عن طريق إعطاء قيمة خاصيتين مثلا left=10px و top=6px أي 10بيكسل من الفوق و6 من جهة اليسار. وهذا ما سنفعل بالنسبة لأيقونة المكبر:

#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

  background-color: black;  /* عوضه بمسار صورة الأيقونة */
}

*ملاحظة: يمكن تغيير قيمة الخاصيتين  left و top حتى تظهر في المكان الصحيح، وبشكل يتناسب مع الصورة النهائية لتصميمك، هذا مثال توضيحي فقط.

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن