مرجع CSS فارسی
PSEUDO-CLASS
focus:
شبه کلاسی است که معمولا برای انتخاب و استایل دهی به المان های لینک (<a>) یا المان های فرم که توسط کاربر کلیک می شوند، استفاده می شود.
المان های فرم ، مانند <input> ها ، <button> ها و <textarea> ها وقتی توسط کاربر کلیک می شوند و آماده برای تایپ شدن هستند ، در وضعیت focus قرار گرفته اند.
وقتی با استفاده از تب در کیبورد ، بین المان های فرم یا لینک ها جا به جا می شویم . آن ها را در وضعیت focus قرار داده ایم.
a:focus {
outline: 0;
/* then add your own styles here */
}
سایر نکات
بعضی از کاربران ، با استفاده از کیبورد بین لینک ها یا المان های فرم جا به جا می شوند. که برای جلوگیری از مشکلات به وجود آمده بین حابت کلیک و کیبورد بهتر است نکات ذکر شده در این مقاله را رعایت کنید.
مثال ها
تکه کد زیر تغیراتی را برای حالت از پیش تعیین شده ی focus: که توسط خود مرورگر اعمال می شود ، انجام می دهد.
a:link {
color: #0099cc;
}
a:visited {
color: grey;
}
a:focus {
background-color: black;
color: white;
}
a:hover {
border-bottom: 1px solid #0099cc;
}
a:active {
background-color: #0099cc;
color: white;
}
و برای المان های فرم مانند <input> و <textarea> می توان از استابل های CSS زیر استفاده کرد.
input:focus, textarea:focus {
background-color: #FFFF66;
border: 1px solid #F47E58;
}
دمو (کد های زیر را تغییر داده و نتیجه را مشاده کنید)
بین المان های لینک و فرم زیر با استفاده از تب در کیبورد و یا کلیک با ماوس جا به جا شوید.
See the Pen :focus CSS examples by alishooti (@alishooti) on CodePen.
پشتیبانی مرورگر
first-child: در کروم ،فایرفاکس ،سافاری ،اپرا +7 ،اینترنت اکسپلورر +7 و اندروید وآی او اس ، پشتیبانی می شود.
بیشتر بخوانید
استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .
همچنین منتظر دیدگاه های شما هستیم.