ویژگی :focus در CSS نمایانگر یک عنصر است که فوکوس را دریافت کرده است. این ویژگی معمولاً زمانی فعال می‌شود که کاربر روی یک عنصر کلیک یا ضربه می‌زند یا عنصری را با استفاده از کلید تب صفحه کلید انتخاب می‌کند.
کلاس :focus pseudo-class به عنصر فوکوس شده اعمال می‌شود. برای انتخاب یک عنصر که حاوی یک عنصر فوکوس شده است، از pseudo-class :focus-within استفاده می‌شود.
این ویژگی برای همه عناصر HTML مانند دکمه‌ها، فیلدهای ورودی، و غیره قابل استفاده است.
سینتکس:
selector:focus {
/* خصوصیات */
}Link
این قطعه کد یک مثال از استفاده از ویژگی :focus در CSS است که فوکوس را بر روی یک لینک تنظیم می‌کند. در این مثال، زمانی که کاربر روی لینک کلیک می‌کند یا از کلید تب صفحه کلید استفاده می‌کند تا به لینک برسد، ویژگی :focus فعال می‌شود.
در این مثال:
- رنگ پیش‌فرض متن لینک بر روی darkviolet تنظیم شده است.
- با فعال شدن فوکوس بر روی لینک، رنگ متن به قرمز تغییر می‌کند و پس‌زمینه لینک به زرد تغییر می‌یابد.
- خطوط حاشیه پیش‌فرضی (outline) که معمولاً در مرورگرها بر روی عناصر فوکوس شده نمایش داده می‌شوند، با استفاده از
outline: none;حذف شده است. - صفحه از یک فونت پیش‌فرض استفاده می‌کند و چیدمان گریدی دارد.
این مثال را می‌توانید با کلیک بر روی لینک یا فشردن کلید تب صفحه کلید برای رسیدن به لینک، آزمایش کنید.
<html>
<head>
<style>
a {
color: darkviolet;
transition: all 0.3s ease;
}
a:focus {
outline: none;
color: red;
background-color: yellow;
}
body {
margin: 5px;
padding: 2rem;
display: grid;
font: 20px/1.4 system-ui, -apple-system, sans-serif;
}
</style>
</head>
<body>
<p>Click on the link or press the tab key.</p>
<p>The link here has a <a href="#0">change in background and foreground color</a> as it is focussed.</p>
</body>
</html>Button
این قطعه کد یک مثال از استفاده از ویژگی :focus در CSS است که فوکوس را بر روی یک دکمه تنظیم می‌کند. ویژگی :focus در اینجا بر روی دکمه اعمال می‌شود و وقتی کاربر روی دکمه کلیک می‌کند یا از کلید تب صفحه کلید استفاده می‌کند تا به دکمه برسد، فعال می‌شود.
در این مثال:
- دکمه از یک استایل اولیه پیش‌فرض با رنگ متن سیاه، پس‌زمینه سفید، حاشیه سیاه و شکل گرد شده با شعاع 24 پیکسل برخوردار است.
- با هوور کردن موس بر روی دکمه، رنگ متن به آبی، رنگ حاشیه به سیاه و پس‌زمینه دکمه به صورت پوشیده در رنگ صورتی روشن تغییر می‌کند.
- وقتی که دکمه فوکوس می‌شود، پس‌زمینه دکمه به رنگ قرمز تیره و متن به رنگ سفید تغییر می‌کند و شکل گردی حاشیه به شکل معمولی تغییر می‌کند.
می‌توانید با کلیک بر روی دکمه یا فشردن کلید تب صفحه کلید برای رسیدن به دکمه، عملکرد ویژگی :focus را بر روی دکمه مشاهده کنید.
<html>
<head>
<style>
button {
display: block;
margin: 2em;
padding: 2px;
font-weight: bold;
font-size: 18px;
text-align: center;
color: black;
background-color: #fff;
border: 2px solid black;
border-radius: 24px;
cursor: pointer;
transition: all 0.3s ease;
width: 150px;
height: 50px;
}
button:hover {
color: blue;
border-color: black;
background-color: lightpink;
}
button:focus {
background-color: darkred;
color: white;
border-radius: 2px;
}
</style>
</head>
<body>
<p>Click on the button or press the tab key.</p>
<button>Click Me!!</button>
</body>
</html>Input Box
در این قطعه کد، یک مثال از استفاده از ویژگی :focus در CSS بر روی یک فیلد ورودی (input) نشان داده شده است. ویژگی :focus در اینجا وقتی که کاربر روی فیلد ورودی کلیک می‌کند یا با فشردن کلید تب از یک المان دیگر به این فیلد می‌رود، فعال می‌شود.
در این مثال:
- یک فرم ساده با یک برچسب (label) برای نام کامل (Full Name) و یک فیلد ورودی (input) برای وارد کردن نام کامل نشان داده شده است.
- فیلد ورودی از یک استایل اولیه پیش‌فرض با رنگ متن سیاه، پس‌زمینه سفید، حاشیه با رنگ مشکی و شکل گرد شده با شعاع 8 پیکسل برخوردار است.
- زمانی که فیلد ورودی فوکوس می‌شود، پس‌زمینه آن به رنگ زرد روشن تغییر می‌یابد.
می‌توانید با کلیک بر روی فیلد ورودی یا فشردن کلید تب صفحه کلید برای رسیدن به فیلد ورودی، عملکرد ویژگی :focus را بر روی آن مشاهده کنید.
<html>
<head>
<style>
label {
display: block;
font-size: 20px;
color: black;
width: 500px;
}
input[type="text"] {
padding: 10px 16px;
font-size: 16px;
color: black;
background-color: #fff;
border: 1px solid #597183;
border-radius: 8px;
margin-top: 5px;
width: 500px;
transition: all 0.3s ease;
}
input[type="text"]:focus {
background-color: lightyellow;
}
</style>
</head>
<body>
<p>Click on the text box or press the tab key.</p>
<form>
<label>
Full Name
<input type="text">
</label>
</form>
</body>
</html>Dropdown Box
در این قطعه کد، یک مثال از استفاده از ویژگی :focus در CSS بر روی یک جعبه کشویی (dropdown) نشان داده شده است. ویژگی :focus در اینجا وقتی که کاربر روی جعبه کشویی کلیک می‌کند و آن را انتخاب می‌کند، فعال می‌شود.
در این مثال:
- یک فرم ساده با یک برچسب (label) برای طعم‌های بستنی و یک جعبه کشویی (select) برای انتخاب طعم بستنی نشان داده شده است.
- جعبه کشویی از یک استایل اولیه پیش‌فرض با رنگ متن سیاه، پس‌زمینه سفید، حاشیه با رنگ مشکی و شکل گرد شده با شعاع 8 پیکسل برخوردار است.
- زمانی که جعبه کشویی فوکوس می‌شود، پس‌زمینه آن به رنگی سبز تغییر می‌یابد و یک سایه با چهار رنگ مختلف اضافه می‌شود که باعث تغییر ظاهر آن می‌شود.
می‌توانید با کلیک بر روی جعبه کشویی و انتخاب یک گزینه، عملکرد ویژگی :focus را بر روی آن مشاهده کنید.
<html>
<head>
<style>
label {
display: block;
font-size: 18px;
color: black;
width: 500px;
}
select {
padding: 10px 16px;
font-size: 16px;
color: black;
background-color: #fff;
border: 1px solid #597183;
border-radius: 8px;
margin-top: 25px;
width: 300px;
transition: all 0.3s ease;
}
select:focus {
background-color: rgb(173, 233, 209);
box-shadow: 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;
}
</style>
</head>
<body>
<p>Select an item from the dropdown box.</p>
<form>
<label>
Ice cream Flavors:
<select name="flavor">
<option>Cookie dough</option>
<option>Pistachio</option>
<option>Cookies & Cream</option>
<option>Cotton Candy</option>
<option>Lemon & Raspberry Sorbet</option>
</select>
</label>
</form>
</body>
</html>Toggle Button
در این قطعه کد، یک مثال از استفاده از ویژگی :focus در CSS بر روی یک دکمه تغییر وضعیت (toggle button) نشان داده شده است. ویژگی :focus در اینجا زمانی فعال می‌شود که دکمه تغییر وضعیت فوکوس می‌شود، برای مثال با کلیک روی دکمه یا انتخاب آن با استفاده از کلید تب صفحه کلید.
در این مثال:
- یک دکمه تغییر وضعیت (toggle button) نمایش داده شده است که با استفاده از یک تیک‌باکس (checkbox) پیاده‌سازی شده است.
- استایل‌های CSS برای تغییر ظاهر دکمه در وضعیت‌های مختلف اعم از عادی، انتخاب شده، هوور و فوکوس تعریف شده‌اند.
- زمانی که دکمه تغییر وضعیت فوکوس می‌شود، یک سایه و حاشیه با رنگ قرمز به دکمه اضافه می‌شود تا تاکید بیشتری بر روی وضعیت فوکوس قرار گیرد.
می‌توانید با کلیک بر روی دکمه و یا انتخاب آن با استفاده از کلید تب صفحه کلید، عملکرد ویژگی :focus را بر روی دکمه مشاهده کنید.
<html>
<head>
<style>
.toggle {
position: relative;
display: block;
width: 100%;
margin: 2em;
}
.toggle label {
padding-right: 8px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 16px;
line-height: 28px;
color: black;
}
.toggle span {
position: relative;
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.toggle span:before {
display: block;
width: 50px;
height: 30px;
content: "";
background-color: #a9adaf;
border-radius: 28px;
transition: background-color 0.3s ease;
}
.toggle span:after {
position: absolute;
top: 1px;
left: 1px;
display: block;
width: 30px;
height: 28px;
visibility: visible;
content: "";
background-color: #fff;
border-radius: 28px;
transition: left 0.3s ease;
}
input[type="checkbox"]:checked ~ span:before {
background-color: orange;
}
input[type="checkbox"]:checked ~ span:after {
top: 1px;
left: 21px;
}
input[type="checkbox"]:hover ~ span:before {
background-color: #1194d1;
}
input[type="checkbox"]:not(:checked):hover ~ span:before {
background-color: #afbec9;
}
input[type="checkbox"]:focus ~ span:before {
outline: none;
box-shadow: 0 0 0 4px red;
}
</style>
</head>
<body>
<div class="toggle">
<label for="toggle1">Check the box to toggle me</label>
<input type="checkbox" id="toggle1" />
<span></span>
</div>
</body>
</html>Associated Properties
در CSS، علاوه بر ویژگی :focus که برای نمایش وضعیت فوکوس بر روی یک عنصر استفاده می‌شود، دو ویژگی دیگر وجود دارد که به طور مستقیم با :focus مرتبط هستند. این ویژگی‌ها عبارتند از:
- :focus-visible:
- ویژگی :focus-visible زمانی فعال می‌شود که یک عنصر فوکوس می‌شود و این فوکوس به کاربر نمایش داده می‌شود.
- این ویژگی برخلاف :focus که فوکوس را بر روی تمام عناصر نشان می‌دهد، تنها وقتی فوکوس به طور واضح بر روی یک عنصر مشخص می‌شود فعال می‌شود. به عبارت دیگر، اگر برنامه کاربردی شما دارای یک منوی کنترلی است که می‌تواند با کلید‌های ترکیبی فوکوس داده شود، این ویژگی فقط در صورتی فعال می‌شود که کاربر بخواهد واقعاً روی آن عنصر فوکوس داشته باشد و این فوکوس به وضوح به کاربر نشان داده می‌شود.
- :focus-within:
- ویژگی :focus-within وقتی فعال می‌شود که یک عنصر فوکوس داشته باشد و عنصری دیگر داخلی این عنصر فوکوس شود.
- این ویژگی بر روی عنصری فعال می‌شود که یک فرزند فوکوس داشته باشد، به عبارت دیگر وقتی یک عنصر فوکوس شود و یکی از فرزندان داخلی آن نیز فوکوس شود، ویژگی :focus-within بر روی عنصر پدر فعال می‌شود.
با استفاده از این دو ویژگی، می‌توانید برای کنترل و طراحی بهتر وضعیت‌های فوکوس در وب‌سایت‌ها و برنامه‌های کاربردی خود استفاده کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام