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;
}

مثال زیر را با بررسی کنید:

 

 

 

پشتیبانی مرورگرها

انتخابگر disabled: در مرورگرهای کروم, فایرفاکس, اپرا +9 و اینترنت اکسپلورر +9 و همچنین در اندروید و iOS کار می کند.