Focus در CSS زمانی فعال می‌شود که یک عنصر ورودی مانند input، textarea، select و button در حالت انتخاب (فعال) قرار بگیرد.

این ویژگی باعث بهبود تجربه کاربری می‌شود، زیرا کاربران متوجه می‌شوند که در حال تعامل با کدام عنصر هستند. در این آموزش، نحوه استایل‌دهی به حالت Focus و ایجاد جلوه‌های بصری زیبا را بررسی خواهیم کرد.

۱. حالت Focus چیست؟

در CSS، از :focus برای تغییر استایل عناصری استفاده می‌شود که کاربر روی آن‌ها کلیک کرده یا با Tab به آن‌ها دسترسی پیدا کرده است.

مثال ساده

input:focus {
    border: 2px solid #007bff;
    outline: none;
}

✅ نتیجه: هنگام کلیک روی فیلد ورودی، رنگ حاشیه آن آبی خواهد شد.

۲. حذف حاشیه پیش‌فرض (Outline)

مرورگرها هنگام Focus به‌صورت پیش‌فرض یک حاشیه (outline) روی عناصر نمایش می‌دهند. برای حذف این حاشیه و استفاده از استایل سفارشی، می‌توان از outline: none; استفاده کرد.

input:focus, textarea:focus {
    outline: none;
    border: 2px solid #28a745;
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

📌 نکته: استفاده از box-shadow باعث می‌شود که هنگام Focus یک افکت زیبای نورانی روی فیلد اعمال شود.

۳. تغییر رنگ پس‌زمینه هنگام Focus

یکی از راه‌های جذاب برای نمایش Focus، تغییر رنگ پس‌زمینه فیلد است.

input:focus {
    background-color: #f8f9fa;
    border-color: #007bff;
}

✅ نتیجه: هنگام فوکوس، پس‌زمینه فیلد روشن‌تر خواهد شد.

۴. ایجاد انیمیشن هنگام Focus

با استفاده از transition می‌توان یک افکت نرم و روان هنگام Focus ایجاد کرد.

input {
    border: 2px solid #ccc;
    padding: 10px;
    transition: all 0.3s ease-in-out;
}

input:focus {
    border-color: #ff4b2b;
    box-shadow: 0 0 10px rgba(255, 75, 43, 0.5);
}

✅ نتیجه: هنگام فوکوس، تغییر رنگ و سایه به‌صورت انیمیشنی و نرم اعمال خواهد شد.

۵. استایل‌دهی به دکمه‌ها هنگام Focus

دکمه‌ها (<button>) نیز می‌توانند در هنگام Focus استایل سفارشی داشته باشند.

button:focus {
    outline: none;
    background-color: #28a745;
    color: white;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
}

✅ نتیجه: هنگام فوکوس، دکمه دارای افکت نورانی سبزرنگ خواهد شد.

۶. تغییر رنگ متن هنگام Focus

می‌توان علاوه بر تغییر حاشیه، رنگ متن را نیز تغییر داد.

input:focus {
    color: #007bff;
    font-weight: bold;
}

✅ نتیجه: هنگام فوکوس، متن داخل فیلد آبی‌رنگ و ضخیم‌تر خواهد شد.

۷. اعمال استایل Focus روی چندین عنصر همزمان

می‌توان چندین عنصر را همزمان هدف قرار داد:

input:focus, textarea:focus, select:focus {
    border: 2px solid #ff4b2b;
    box-shadow: 0 0 5px rgba(255, 75, 43, 0.5);
}

✅ نتیجه: تمامی فیلدهای ورودی، textarea و select هنگام فوکوس دارای استایل یکسان خواهند شد.

۸. ترکیب :focus با سایر شبه‌کلاس‌ها

می‌توان :focus را با :hover یا :active ترکیب کرد.

input:hover, input:focus {
    border-color: #ff416c;
    transition: border-color 0.3s ease-in-out;
}

✅ نتیجه: هنگام hover یا focus، رنگ حاشیه تغییر خواهد کرد.

۹. نتیجه‌گیری

با استفاده از :focus در CSS، می‌توان جلوه‌های بصری جذاب‌تری برای فیلدهای ورودی و دکمه‌ها ایجاد کرد و تجربه کاربری را بهبود بخشید. این ویژگی باعث افزایش تعامل کاربران با فرم‌ها و سایر عناصر تعاملی سایت می‌شود.