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

Mohamed Mohamed44 · 24 مايو 2023

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

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

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

تم التعديل في 8 يونيو 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

عمر قره محمد · 24 مايو 2023

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

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

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

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

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

Mustafa Suleiman · 24 مايو 2023

في 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;
}

عبدالباسط ابراهيم · 24 مايو 2023

يتم استخدام خاصية 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

Mohamed Mohamed44 · 24 مايو 2023

شكرا جزيلا يا بشمهندسين على سرعة الرد

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

السؤال

Mohamed Mohamed44

4 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

Mustafa Suleiman

عبدالباسط ابراهيم

Mohamed Mohamed44

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية