الصنف :focus
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الصنف الزائف :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).