disabled یک pseudo-class می باشد که به وسیله آن می توان عناصر غیر فعال (disabled) را انتخاب و برای آنها استایل مشخصی تعریف کرد, مثل عناصر input, select, textarea, button که می توانند ویژگی disabled
داشته باشند. وقتی یک عنصر غیر فعال می شود کاربر دیگر قادر به کلیک کردن یا انتخاب و در کل تعامل با آن نمی باشد.
به عنوان مثل تکه کد زیر تمام عناصر غیرفعال صفحه را تبدیل به عنصری با پس زمینه خاکستری و حاشیه و رنگ متن خاکستری روشن تر می کند.
:disabled {
background-color: #999;
color: #eee;
border: 1px solid #eee;
}
و یا در مثال زیر استایل, تنها بر روی عناصر input متنی اعمال می شود.
input[type="text"]:disabled {
background-color: #eee;
border: 1px solid #aaa;
}
همچنین می توان به صورت زنجیره ای هم از این انتخابگر استفاده کرد. به عنوان مثال تکه کد زیر باعث می شود زمانی که کاربر نشانه گر را بر روی دکمه غیرفعال قرار دهد نشانه گر تبدیل به علامت ممنوع شود.
button:disabled:hover {
cursor: not-allowed;
}
مثال زیر را با بررسی کنید:
See the Pen dowWxE by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگرها
انتخابگر disabled: در مرورگرهای کروم, فایرفاکس, اپرا +9 و اینترنت اکسپلورر +9 و همچنین در اندروید و iOS کار می کند.
با سلام و عرض ادب خدمت شما
به صورت پیش فرض کلاس menu هیدنه با خاصیت diplay:none ، حال چطور میشه با کلیک بر روی متنی که داخل تگ i هست کلاس menu
قابل نمایش در بیاد با توجه به اینکه لینک ما داخل کلاس cat و خود cat داخل head می باشد و کلاس menu هم تراز کلاس head است
link
…..
چه موقع یک عنصر غیرفعال میشه؟
وقتی در HTML به تگ اون عنصر ویژگی disabled داده میشه:
خروجی:
سلام استاد، وقتتون بخیر…
میخواستم بابت آموزشهاتون نهایت تشکر رو داشته باشم،
ممنون از لطفتون!
کمک خیلی بزرگی کردین…
سلام، وقت شما هم بخیر
خوشحالم مفید بوده.
موفق باشید