enabled یک pseudo-class می باشد که به وسیله آن می توان در یک صفحه عناصری (معمولا عناصر فرم) که فعال هستند را انتخاب کرد.

این انتخابگر عناصری مثل <textarea> , <button> , <input> , <button> که کاربر می تواند از طریق وارد کردن متن, کلیک کردن و یا focus با آنها تعامل داشته باشد را انتخاب می کند.

ادامه مطلب

 

همینطور که این عناصر یک حالت فعال (enabled) دارند یک حالت غیر فعال (disabled) نیز دارند که با disabled: در CSS در دسترس قرار خواهند گرفت.

به عنوان مثل تکه کد زیر تمام عناصر فعال صفحه را تبدیل به عنصری با حاشیه رنگ آبی می کند:

:enabled {  
  border: 1px solid #42A5F5;
}

و یا در مثال زیر استایل, تنها بر روی عناصر input متنی اعمال می شود.

input[type="text"]:enabled {
  border: 1px solid #42A5F5;
}

همچنین می توان به صورت زنجیره ای هم از این انتخابگر استفاده کرد. به عنوان مثال تکه کد زیر باعث می شود زمانی که کاربر نشانه گر را بر روی دکمه ای که در حالت فعال است قرار دهد آن دکمه پس زمینه آبی بگیرد.

button:enabled:hover {
  background-color: #42A5F5;
}

 

 

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

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