CSS/:focus

الصنف الزائف ‎:focus في CSS (أي pseudo-class) يُمثِّل عنصرًا (مثل عناصر النماذج) الذي استقبل التركيز (foucs)، ويُفعَّل التركيز إذا ضغط المستخدم أو لمس أحد العناصر أو وصل إليه عبر مفتاح tab على لوحة المفاتيح.

input:focus {
  color: red;
}

ملاحظة: هذا الصنف الزائف سيُحدِّد العنصر الذي استقبل التركيز فقط، استعمل الصنف الزائف ‎:focus-within لتحديد العنصر الذي يحتوي على العنصر الذي استقبل التركيز. الشكل العام لهذا المحدد:

:focus

أمثلة

لاحظ كيف سيتغير تنسيق العنصر <input> عندما يستقبل التركيز:

<input class="red-input" value="سأكون احمر اللون عند التركيز"><br>
<input class="blue-input" value="سأكون أزرق اللون عند التركيز">

شيفرة CSS:

.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	8.0	7.0	1.0

انظر أيضًا

• صفحة الصنف الزائف focus-within: الذي يُمثِّل عنصرًا (مثل عناصر النماذج) التي استقبل التركيز (foucs) أو احتوى على عنصر قد استقبل التركيز.

مصادر ومواصفات

• معيار HTML Living Standard.
• مسودة Selectors Level 4.
• مواصفة Selectors Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.