disabled:

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 کار می کند.

سوالت رو توی پنل بحث و گفتگو مطرح کن.

یک دیدگاه برای “disabled:

  1. با سلام و عرض ادب خدمت شما
    به صورت پیش فرض کلاس menu هیدنه با خاصیت diplay:none ، حال چطور میشه با کلیک بر روی متنی که داخل تگ i هست کلاس menu
    قابل نمایش در بیاد با توجه به اینکه لینک ما داخل کلاس cat و خود cat داخل head می باشد و کلاس menu هم تراز کلاس head است

    link

    …..

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *