شبه کلاس disabled: در CSS

:disabled Pseudo-class

شبه کلاس disabled: در CSS، عناصر غیر فعال را هدف قرار می هد. عنصری که غیر فعال میشود نمیتواند فعال شود (انتخاب شدن، کلیک شدن و یا تایپ شدن).

عناصری مانند دکمه ها <button>، منوهای انتخابی <select>، انواع عناصر فرم <input> و ناحیه تایپ متن <textarea> میتوانند این شبه کلاس را بپذیرند و بعد از آن نمی توانند توسط کاربر انتخاب شوند.

html

<input type="submit" disabled> 

<input type="submit" disabled="disabled"> 

در مثال زیر میبینیم که به تمام عناصر input و عنصر label همراه آنها که در ساختار html به آنها صفت disabled داده شده، هدف قرار داده شده و استایل دهی شده است:

html

<input type="checkbox" id="ch1" disabled>
<label for="ch1">گزینه 1</label>
<input type="checkbox" id="ch2">
<label for="ch2">گزینه 2</label><br>
<input type="radio" name="r" id="r1">
<label for="r1">گزینه 1</label>
<input type="radio" name="r" id="r2" disabled>
<label for="r2">گزینه 2</label><br><br>
<textarea rows="5" disabled>من غیر فعال هستم!</textarea>

css

:disabled + label,
:disabled {
  color: red;
  text-decoration: line-through;
  cursor: not-allowed;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این شبه کلاس در CSS پشتیبانی می کنند.