اذهب إلى المحتوى
  • 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>

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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 حتى تظهر في المكان الصحيح، وبشكل يتناسب مع الصورة النهائية لتصميمك، هذا مثال توضيحي فقط.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...