تأثيرات التركيز (Focus)

جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 9 من 43.

تسمح لك الفئة الزائفة (pseudo-class) ‏:focus بتنسيق عنصر عندما يحصل على التركيز—مثل عند النقر عليه أو التنقل إليه باستخدام لوحة المفاتيح. إنها طريقة رائعة لتمييز العنصر الذي تتفاعل معه! على سبيل المثال:

<input type="text">

تنسيق حقل الإدخال عند التركيز عليه:

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

عندما ينقر المستخدم على حقل الإدخال هذا أو ينتقل إليه باستخدام مفتاح Tab، سيتغير لون الإطار إلى اللون الأزرق وسيظهر ظل أزرق خفيف حوله.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

التحدي

سهل

أنشئ قاعدة CSS تطبق تنسيقًا خاصًا على حقل إدخال نص عند التركيز عليه (focus).

عند التركيز، يتغير الإطار إلى اللون البرتقالي rgb(255, 152, 0)
عند التركيز، يضيف لون خلفية أصفر rgb(255, 243, 224)

ورقة مرجعية

تقوم الفئة الزائفة :focus بتنسيق عنصر عندما يتلقى التركيز (عند النقر عليه أو الانتقال إليه عبر مفتاح Tab):

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

يؤدي هذا إلى تغيير لون الإطار وإضافة ظل عندما يتم التركيز على حقل الإدخال.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
     <title>Focus Effects</title>
  <style>
    input{
      border: 2px solid gray;
      padding: 8px;
      outline: none;
    }
     /* Write your CSS here */
    
  </style>
</head>
<body>
  <h3>Focus Effects Demo</h3>
  <input type="text" placeholder="Type here...">
  <button>Click Me</button>
</body>
</html>

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.