pseudo-class :focus-visible CSS

تعریف و استفاده

CSS :focus-visible pseudo-class برای اعمال استایل‌های فокус تنها در صورت فокус از طریق کلید، نه از طریق ماوس، استفاده شود.

این می‌تواند با :focus با ترکیب، استایل‌های مختلفی برای فокус‌های کلید و ماوس/ لمسی ایجاد کنید.

مثال

نحوه انتخاب و تنظیم استایل برای دکمه‌هایی که با استفاده از کلید Tab از طریق صفحه کلید به آنها فокус داده می‌شوند را مشخص کنید:

button:focus-visible {
  outline: 2px solid red;
}

آزمایش کنید

زبان CSS

:focus-visible {
  اظلاعات css;
}

جزئیات فنی

نسخه: CSS4

پشتیبانی مرورگر

اعداد در جدول نسخه اولین مرورگر پشتیبان از این پseudo-class را مشخص می‌کنند.

کروم ایج فایرفاکس سافاری آپرا
86 86 85 15.4 72

مربوط صفحات

تعلیم:CSS سائیڈ

مطالبه:CSS :focus سائیڈ کیمپٹی