انتقل إلى محتوى الدرس

Bilingual Inputs and Logical Icons الحقول ثنائية اللغة وحشوة الأيقونات

صمم نماذج إدخال احترافية متجاوبة وثنائية اللغة في CSS بتوريث الخطوط والحشوات المنطقية للأيقونات وحلقات التركيز الواضحة وتخصيص مفاتيح الاختيار وحالات التحقق البصري المريحة للمستخدم.
1 صفوف تعليمية
لغة CSS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تتعطل حقول البحث والحقول المزودة بأيقونة داخلية فور تحويل الواجهة إلى العربية عندما يثبت المطور موضع الأيقونة مادياً عبر left: 12px وحشوة الحقل عبر padding-left: 38px؛ فتبقى الأيقونة في اليسار أو يصطدم بها النص المكتوب!

والحل الهندسي الصحيح هو تثبيت الأيقونة عبر inset-inline-start: 12px ومنح الحقل حشوة بادئة مطابقة padding-inline-start: 38px لينعكس التصميم تلقائياً بين العربية والإنجليزية. أما البيانات اللاتينية بطبيعتها كالبريد الإلكتروني والروابط داخل نموذج عربي فيُفضل إعطاؤها السمة dir="ltr" على الحقل نفسه مع إبقاء تسميته العلوية بالعربية.