: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 پشتیبانی می کنند.