الفرق بين المراجعتين لصفحة: «CSS/:focus»
< CSS
تصحيح خطأ لغوي |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 13: | سطر 13: | ||
لاحظ كيف سيتغير تنسيق العنصر <code>[[HTML/input|<input>]]</code> عندما يستقبل التركيز: | لاحظ كيف سيتغير تنسيق العنصر <code>[[HTML/input|<input>]]</code> عندما يستقبل التركيز: | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<input class="red-input" value=" | <input class="red-input" value="سأكون احمر اللون عند التركيز"><br> | ||
<input class="blue-input" value=" | <input class="blue-input" value="سأكون أزرق اللون عند التركيز"> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة [[CSS]]:<syntaxhighlight lang="css"> | ||
.red-input:focus { | .red-input:focus { | ||
background: yellow; | background: yellow; | ||
| سطر 42: | سطر 42: | ||
|1.0 | |1.0 | ||
|} | |} | ||
==مصادر ومواصفات== | ==انظر أيضًا== | ||
* صفحة الصنف الزائف <code>[[CSS/:focus-within|focus-within:]]</code> الذي يُمثِّل عنصرًا (مثل عناصر النماذج) التي استقبل التركيز (foucs) أو احتوى على عنصر قد استقبل التركيز. | |||
== مصادر ومواصفات == | |||
*معيار [https://html.spec.whatwg.org/multipage/scripting.html#selector-focus HTML Living Standard]. | *معيار [https://html.spec.whatwg.org/multipage/scripting.html#selector-focus HTML Living Standard]. | ||
*مسودة [https://drafts.csswg.org/selectors-4/#focus-pseudo Selectors Level 4]. | *مسودة [https://drafts.csswg.org/selectors-4/#focus-pseudo Selectors Level 4]. | ||
*مواصفة [https://drafts.csswg.org/selectors-3/#the-user-action-pseudo-classes-hover-act Selectors Level 3]. | *مواصفة [https://drafts.csswg.org/selectors-3/#the-user-action-pseudo-classes-hover-act Selectors Level 3]. | ||
*مواصفة [http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes CSS Level 2 (Revision 1)]. | *مواصفة [http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes CSS Level 2 (Revision 1)]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Selectors]] | [[تصنيف:CSS Selectors|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS pseudo-class]] | [[تصنيف:CSS pseudo-class|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 11:18، 7 أكتوبر 2022
الصنف الزائف :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).