شرح :focus في CSS — كيف تبرز الحقل النشط وتحسن تجربة الإدخال؟

حالة :focus تظهر عندما يضغط المستخدم داخل الحقل أو يصل له عبر زر Tab. هي من أهم حالات التفاعل في النماذج لأنها توجه المستخدم بصرياً.

إذا كنت تبحث عن شرح focus في CSS أو أفضل تنسيق input:focus أو هل outline: none آمن، فهذا الدرس يوضحها بوضوح.

ما هي :focus في CSS؟

المحدد :focus يستهدف العنصر النشط حالياً (input, textarea, select, button).

التعريف البسيط: :focus في CSS هي حالة العنصر الذي يستقبل الإدخال الآن.

تغيير border عند focus في CSS

input:focus {
    border: 2px solid #2563eb;
}

ماذا يفعل هذا الكود؟ يغيّر إطار الحقل إلى أزرق عند التركيز.

النتيجة المتوقعة: المستخدم يعرف فوراً أين يكتب.

خطأ شائع: تغيير الحد بشكل قوي جداً يسبب اهتزاز التخطيط.

إضافة box-shadow لحالة التركيز

input:focus {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

ماذا يفعل هذا الكود؟ يضيف هالة ناعمة حول الحقل النشط.

النتيجة المتوقعة: تأثير focus احترافي وواضح.

خطأ شائع: ظل غامق جداً يقلل وضوح النص.

outline: none في CSS — متى نستخدمها؟

كثير من المطورين يكتبون outline: none; لإزالة الشكل الافتراضي. هذا مسموح فقط إذا وضعت بديلاً واضحاً (border أو shadow).

input:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

ماذا يفعل هذا الكود؟ يزيل outline الافتراضي ويستبدله بتأثير focus مخصص.

النتيجة المتوقعة: تصميم موحد بدون فقدان وضوح التركيز.

خطأ شائع: إزالة outline بدون أي بديل، وهذا يضر accessibility.

تنسيق focus لأكثر من عنصر في CSS

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
}

ماذا يفعل هذا الكود؟ يوحّد تأثير التركيز على كل عناصر النموذج.

النتيجة المتوقعة: تجربة متناسقة عبر الحقول المختلفة.

مثال عملي كامل: Form Focus احترافي

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

ماذا يفعل هذا المثال؟ ينشئ حقولاً هادئة في الوضع العادي ومؤكدة بصرياً في حالة التركيز.

النتيجة المتوقعة: form أكثر وضوحاً وسهولة استخدام.

أخطاء شائعة في Focus Styling in CSS

١) إزالة outline بدون بديل: مشكلة وصولية كبيرة.

٢) تأثير focus غير مرئي: ألوان خفيفة جداً.

٣) اختلاف شديد بين الحقول: تجربة غير متناسقة.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

كيف أغير لون input عند focus في CSS؟

استخدم input:focus { border-color: ...; }.

هل يمكن استخدام box-shadow مع focus في CSS؟

نعم، وهو من أفضل الطرق لإبراز الحقل النشط.

هل outline: none سيئ في CSS؟

ليس سيئاً إذا استبدلته بمؤشر focus واضح يدعم accessibility.

كيف أجعل كل عناصر النموذج بنفس focus style؟

اجمع المحددات: input:focus, textarea:focus, select:focus.

لماذا focus لا يظهر في الحقل؟

قد توجد قاعدة CSS أقوى (specificity) أو خصائص تعطل المظهر.