این آموزش در تاریخ ۱۴۰۰/۱۰/۱۳ آپدیت شده است.
آموزش شبه کلاس focus در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه کلاس focus در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
شبه کلاس focus در CSS
با استفاده از شبه کلاس ( یا هم انتخابگر ) focus در CSS میتوان استایل دلخواه، برای لینک ها یا معمولا تگ های Input ( برای لحظه ی فوکوس شدن یا کلیک شدن روی آنها ) را در یک صفحه وب مشخص کرد.
| نسخه | CSS2 |
|---|
Free-Learn
مثال از شبه کلاس focus در CSS
در ادامه میتوانید یک مثال از این انتخابگر / شبه کلاس را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده در تگ a
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> a:focus{ background-color:orange; color:#fff; padding:5px; text-decoration:none; border-radius:50px; } </style> |
مثال شماره ۲ : استفاده در تگ input ( گفتیم وقتی روی اینپوت کلیک شد، اندازه اینپوت بزرگ شه )
|
1 2 3 4 5 6 7 |
/* وقتی روش کلیک شد */ input[type="text"]:focus{ background-color:#2196F3; color:#fff; border:2px solid #fff; width:100%; } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه کلاس focus در CSS پشتیبانی میکنند یا خیر.
| نام انتخابگر | Chrome | Firefox | Opera | Safari | Edge |
| focus: | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری شبه کلاس focus در CSS
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه کلاس در CSS بصورت زیر می باشد.
|
1 2 3 |
:focus { دستورات سی اس اس در اینجا } |
Free-Learn
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.
