09902090383

09337734689

تهران، خیابان شریعتی، خیابان معلم

resume.webbyme.ir

تلگرام طراحی سایت وب من

09902090383

09127363007

Top

آشنایی با disabled

آشنایی با :disabled pseudo-class

آشنایی با disabled

کاربرد disabled در CSS

انتخابگر :disabled المان هایی از HTML را که می توانند یک مقدار ورودی ( input ) از کاربر دریافت کنند را انتخاب می کند.

وقتی یک المان HTML ویژگی :disabled را داشته باشد می توانیم یک استایل خاص را برای input تعریف کنیم

این ویژگی ها در انتخابگر سطح سوم CSS به عنوان “شبه کلاس کلاس حالت UI” تعریف شده است، به این معنی که محتوای استایل بر اساس تعامل کاربر با یک عنصر ورودی تعریف می شود.

    المان هایی که می توانند این ویژگی را داشته باشند عبارتند از:

  • <button>
  • <input>
  • <textarea>
  • <optgroup>
  • <option>
  • <fieldset>

دو مقدار را برای این ویژگی می توانیم تعریف کنیم: disabled=”disabled” یا در HTML5 می توانیم از کلمه کلیدی boolean استفاده کنیم.

می توانیم به یک المان با استفاده از انتخابگر :disabled pseudo-class استایل بدهیم:

HTML


<form action="#">
<label for="name">Enabled Input:</label>
<input type="text" autofocus>
<hr>
<label for="name">Disabled Input:</label>
<input type="text" disabled>
</form>

CSS


/* The good stuff starts here :)
*/
input {
width: 60%;
margin: 0;
border: none;
outline: 1px solid lightgrey;
outline-offset: 2px;
}
input:disabled {
background-color: #eee;
border: 1px solid #aaa;
}

نکته:

  • :disabled می تواند با سایر انتخابگرهای pseudo به صورت زنجیره ایی بیاید. مانند :after ِیا :before با ایجاد آیکون باعث می شود نظر کاربر جلب شود.

  • می توانیم وقتی ویژگی disabled به المان HTML اضافه و یا حذف شد از Animation یا Transition استفاده کنیم.

مقالات مرتبط

آموزش استفاده از after / before در css
pseudo-class

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

Chrome Safari Firefox IE Opera iOS Android
All 3.1 All 9 9 All All
هیچ نظری وجود ندارد

ارسال نظر

CommentLuv badge