اذهب إلى المحتوى
  • 0

استخدام العنصر الزائف ":before" في CSS لا يصلح لإضافة عنصر قبل عنصر "input" والسبب في ذلك

Mohamed Mohamed44

السؤال

لماذا لا يصلح استخدام خاصية before مع عنصر input 

المراد هنا عمل ايقونة search  داخل عنصر input type: search 

مثل الشكل الذى بالصورة 

 

Screenshot 2023-05-24 131634.jpg

Screenshot 2023-05-24 131857.jpg

تم التعديل في بواسطة Mustafa Suleiman
تعديل عنوان السؤال
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

في CSS، تعتبر ":before" عنصر زائف وتستخدم لإضافة محتوى قبل عنصر محدد، بينما ":after" تستخدم لإضافة محتوى بعد عنصر محدد، وغالبًا تستخدم هاتين الخاصيتين لإضافة عناصر مرئية إلى عناصر HTML الموجودة.

لكن في حالة عنصر الإدخال "input"، يعتبر استخدام ":before" غير صحيح ولا يعمل على نحو صحيح.، ذلك لأنه عنصر الإدخال "input" يعتبر عنصراً فارغاً لا يحتوي على محتوى داخلي.

مما يعني أنه لا يمكنك استخدام ":before" لإضافة محتوى قبل عنصر "input" نفسه.

وإذا كنت ترغب في إنشاء رمز البحث داخل عنصر الإدخال "input"، تستطيع استخدام العديد من الطرق لتحقيق ذلك.

واحدة من هذه الطرق هي وضع عنصر فرعي مستقل للعنصر "input" واستخدام الخاصية "position: absolute" لتحديد موقع الرمز بالنسبة لعنصر الإدخال، كتعيين أيقونة لرمز البحث كخلفية للعنصر الفرعي وتنسيقه بواسطة CSS ليتناسب مع المظهر المطلوب.

وسأوضح لك الكود اللازم لإنشاء رمز البحث داخل عنصر الإدخال "input" باستخدام خاصية "position: absolute":

HTML:

<div class="search-container">
  <input type="text" class="search-input">
  <span class="search-icon"></span>
</div>

CSS:

.search-container {
  position: relative;
}

.search-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url('path/to/search-icon.png');
  background-size: cover;
}

.search-input {
  padding-right: 30px;
}

حيث قمت بإنشاء عنصر <div> لتكون حاوية لعنصر الإدخال "input" وعنصر الرمز "span".

ثم بتعيين الخاصية "position: relative" للعنصر الحاوي .search-container ليمكن تحديد موقع العناصر الفرعية بالنسبة له.

وتحديد الخاصية "position: absolute" للعنصر الفرعي .search-icon ليمكن تحديد موقعه بالنسبة للحاوية.

ثم استخدمت الخاصيات top, right, transform لتحديد موقع الرمز في الزاوية العلوية اليمنى ووسط العنصر، قمت أيضًا بتعيين خلفية للرمز باستخدام خاصية "background-image" وتحديد حجمها باستخدام "background-size".

أخيرًا، تعديل حجم عنصر الإدخال "input" بإضافة الحشو على الجانب الأيمن ليسمح بوجود مساحة كافية لعرض الرمز داخل العنصر.

ولا تنسى استبدال 'path/to/search-icon.png' بمسار الصورة الخاصة بأيقونة البحث، أو تستطيع استخدام أيقونة من Font Awesome.

وإليك مثال إذا أردت استخدام Font Awesome:

HTML:

<!DOCTYPE html>
<html>
<head>
  <!-- استيراد Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  <div class="search-container">
    <input type="text" class="search-input">
    <span class="search-icon"><i class="fas fa-search"></i></span>
  </div>
</body>
</html>

قمت بتحديد الأيقونة المستخدمة لرمز البحث باستخدام العنصر <i> ومنحها الفئات المناسبة .fas و .fa-search، حيث .fas تعني استخدام الأيقونات الخطية (Solid) و.fa-search تعني استخدام أيقونة البحث.

CSS:

.search-container {
  position: relative;
}

.search-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #999; /* لتغيير لون الأيقونة */
}

.search-input {
  padding-right: 30px;
}

 

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

  • 1

السبب في عدم صلاحية استخدام خاصية before مع عنصر input هو أن before تقوم بإضافة محتوى داخل العنصر التي يتم إضافتها له، وعنصر input لا يمكن أن يحتوي على عناصر أخرى. لذلك، لا يمكن تطبيق هذه الخاصية على عنصر input.

إذا كنت تريد إضافة محتوى قبل أو بعد عنصر input، فقد تحتاج إلى استخدام عنصر آخر كحاوية له.

قد يقيدك الاطلاع على المصادر التالية :

العنصر input في موسوعة حسوب

مقالة عن مربعات البحث :

 

 

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

  • 1

يتم استخدام خاصية before في CSS لعرض محتوى معين قبل العنصر الذي تتم معالجته. ومع ذلك، فإنه لا يمكن استخدام خاصية before مع عنصر input كما تم الشرح في التعليقات السابقة

علاوة على ذلك، فإن استخدام الخاصية before مع عنصر input من نوع search قد يؤدي إلى تغيير مظهر العنصر بشكل غير مرغوب فيه، وذلك بسبب كيفية تنسيق المتصفحات لهذا النوع من العنصر.

بدلاً من ذلك، يمكن استخدام الصورة كخلفية لعنصر input والتحكم في مظهرها باستخدام CSS. ومن الممكن أيضافة الصورة باستخدام خاصية background-image في CSS، ويمكن تعديل مظهر الصورة باستخدام خصائص مثل background-position و background-size وغيرها.

على سبيل المثال، يمكن استخدام الكود التالي لإضافة ايقونة البحث كخلفية لعنصر input من نوع search:

input[type="search"] {
  background-image: url("path/to/search-icon.png");
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 20px; /* تعديل هذه القيمة حسب حجم الصورة */
}

يتم وضع الصورة كخلفية للعنصر input باستخدام خاصية background-image. كما يتم تحديد موضع الصورة باستخدام خاصية background-position، وتحديد عدم تكرار الصورة باستخدام خاصية background-repeat. وأخيرًا، يتم إضافة بعض التباع باستخدام خصائص الحشو (padding) لضمان عدم تغطية النص بالصورة.

ومثال على ذلك يمكنك الإطلاع على ال pen التالية

 https://codepen.io/tippingpointdev/pen/WNZbWGe

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...