Mohamed Mohamed44 نشر 24 مايو 2023 أرسل تقرير مشاركة نشر 24 مايو 2023 (معدل) لماذا لا يصلح استخدام خاصية before مع عنصر input المراد هنا عمل ايقونة search داخل عنصر input type: search مثل الشكل الذى بالصورة تم التعديل في 8 يونيو 2023 بواسطة Mustafa Suleiman تعديل عنوان السؤال 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 Mustafa Suleiman نشر 24 مايو 2023 أرسل تقرير مشاركة نشر 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; } 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 عمر قره محمد نشر 24 مايو 2023 أرسل تقرير مشاركة نشر 24 مايو 2023 السبب في عدم صلاحية استخدام خاصية before مع عنصر input هو أن before تقوم بإضافة محتوى داخل العنصر التي يتم إضافتها له، وعنصر input لا يمكن أن يحتوي على عناصر أخرى. لذلك، لا يمكن تطبيق هذه الخاصية على عنصر input. إذا كنت تريد إضافة محتوى قبل أو بعد عنصر input، فقد تحتاج إلى استخدام عنصر آخر كحاوية له. قد يقيدك الاطلاع على المصادر التالية : العنصر input في موسوعة حسوب مقالة عن مربعات البحث : 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 عبدالباسط ابراهيم نشر 24 مايو 2023 أرسل تقرير مشاركة نشر 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 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mohamed Mohamed44 نشر 24 مايو 2023 الكاتب أرسل تقرير مشاركة نشر 24 مايو 2023 شكرا جزيلا يا بشمهندسين على سرعة الرد اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Mohamed Mohamed44
لماذا لا يصلح استخدام خاصية before مع عنصر input
المراد هنا عمل ايقونة search داخل عنصر input type: search
مثل الشكل الذى بالصورة
تعديل عنوان السؤال
رابط هذا التعليق
شارك على الشبكات الإجتماعية
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.