focus یک pseudo-class می باشد که برای انتخاب و استایل دهی به عناصری که در معرض تمرکز عملکرد کاربر قرار می گیرند, می باشد. حال این تمرکز می تواند با استفاده از کلیک کردن و یا با استفاده از صفحه کلید (زدن دکمه tab) باشد. عناصری که حالت focus را دارند معمولا لینک ها و عناصر فرم مثل input , textarea و غیره هستند.

وقتی کاربر با استفاده از کلید tab روی عناصر فرم یا لینک ها تمرکز می کند مرورگرها معمولا به صورت پیشفرض یک خط بیرونی ( outline ) دور آن عناصر ترسیم می کنند که معمولا این استایل در همه مرورگرها یکسان نیست پس شما شاید بخواهید با استفاده از انتخابگر focus یک استایل مخصوص و البته یکسان در همه مرورگرها برای حالت focus آن عناصر در نظر بگیرید.

ادامه مطلب

 

مرورگرها معمولا در حالت تمرکز outline را به وجود می آورند پس شما در مرحله اول باید آن outline را از بین ببرید.

a:focus {
  outline: 0;
  /* حال استایل خود را اضافه کنید */
}

توجه داشته باشید که خیلی از کاربران با صفحه کلید بر روی عناصر صفحه حرکت می کنند پس برای آنها حالت focus خیلی با ارزش می باشد پس اگر استایل پیشفرض مرورگر را حذف می کنید حتما استایل جدیدی برای این حالت عناصر برای کاربران فراهم کنید.

تکه کد زیر را حالت focus را برای عناصر a و input و textarea استایل دهی می کند.

a:focus {
  background-color: black;
  color: white;
}

input:focus, textarea:focus {
  background-color: lightgray;
  border: 1px solid lightblue;
}

 

 

زمانی که قصد استایل دهی بر روی حالت های مختلف یک لینک از قبیل link , visited , focus , hover , active را دارید باید مراقب ترتیب نوشتن آن ها در CSS باشید.

ترتیب زیر در حالت عمومی ترتیب مناسبی است اما در نهایت, این طرح است که ترتیب را مشخص می کند:

a:link {

}

a:visited {

}

a:focus {
  
}

a:hover {

}

a:active {

}

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

focus: در مرورگرهای کروم, فایرفاکس, اپرا +7 و اینترنت اکسپلورر +7 و همچنین در اندروید و iOS کار می کند.