الفرق بين المراجعتين لصفحة: «CSS/:focus»

مراجعة 15:20، 3 أكتوبر 2018

الصنف الزائف ‎: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

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

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

@@ سطر 13: / سطر 13: @@
 لاحظ كيف سيتغير تنسيق العنصر <code>[[HTML/input|<input>]]</code> عندما يستقبل التركيز:
 <syntaxhighlight lang="html">
-<input class="red-input" value="I'll be red when focused."><br>
+<input class="red-input" value="سأكون احمر اللون عند التركيز"><br>
-<input class="blue-input" value="I'll be blue when focused.">
+<input class="blue-input" value="سأكون أزرق اللون عند التركيز">
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 .red-input:focus {