اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب:
چهار دقیقه
31- :disabled
تگ‌هایی را انتخاب می‌نماید که دارای ویژگی disabled می‌باشند.
<style>
:disabled {
background: yellow;
}
</style>
<input disabled="disabled"/>
<input/>
<input disabled="disabled"/>
<input /> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :disabled | 3 |
32- :enabled
تگ‌هایی را انتخاب می‌نماید که فاقد ویژگی disabled می‌باشند. در حال حاضر در اکثر مرورگرها فقط برای تگ input و textarea عمل می‌کند.
<style>
:enabled {
background: yellow;
}
</style>
<input disabled="disabled" />
<input />
<input disabled="disabled" />
<input /> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :enabled | 3 |
33- :read-only
تگ‌هایی را انتخاب می‌نماید که دارای ویژگی readonly می‌باشند. در برخی مرورگرها ممکن است تگ body و سایر تگ‌هایی را که محتوای آنها غیر قابل ویرایش می‌باشد نیز انتخاب نماید.
<style>
:read-only {
background: yellow;
}
</style>
<input readonly="readonly" />
<input />
<input readonly="readonly" />
<input /> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| Yes | Yes | No | -moz- | Yes | :read-only | 3 |
34- :read-write
تگ‌هایی را انتخاب می‌نماید که فاقد ویژگی readonly می‌باشند و یا محتوای آنها قابل ویرایش است.
<style>
:read-write {
background: yellow;
}
</style>
<input readonly="readonly" />
<input />
<input readonly="readonly" />
<input /> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| Yes | Yes | No | -moz- | Yes | :read-write | 3 |
35- :valid
تگ‌های input ایی را انتخاب می‌نماید که مقدار ورودی آنها با توجه به ویژگی‌های type و pattern معتبر باشند.
مثال مربوط به این بخش در Selector بعدی، یعنی :invalid ذکر شده است.
پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 5.0 | 10.0 | 10.0 | 4.0 | 10.0 | :valid | 3 |
36- :invalid
تگ‌های input ی را انتخاب می‌نماید که مقدار ورودی آنها با توجه به ویژگی‌های type و pattern نامعتبر باشند.
<style>
:valid {
border: 3px solid green;
}
:invalid {
border: 3px solid red;
}
</style>
<input type="number" />
<input type="text" pattern="^[a-z]{2,10}$"/>
<input type="email" /> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 5.0 | 10.0 | 10.0 | 4.0 | 10.0 | :invalid | 3 |
37- :required
تگ‌هایی را انتخاب می‌نماید که دارای ویژگی required می‌باشند.
<style>
:required {
background: yellow;
}
</style>
<input required="required" />
<input />
<input required="required" />
<input /> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 5.0 | 10.0 | 10.0 | 4.0 | 10.0 | :required | 3 |
38- :optional
تگ‌هایی را انتخاب می‌نماید که فاقد ویژگی required می‌باشند.
<style>
:optional {
background: yellow;
}
</style>
<input required="required" />
<input />
<input required="required" />
<input /> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 5.0 | 10.0 | 10.0 | 4.0 | 10.0 | :optional | 3 |
39- :in-range
برای تگ‌های input ی استفاده می‌شود که ویژگی min و max دارند. تگ هایی را انتخاب می‌نماید که مقدار ورودی آنها در بازه‌ی min و max باشند.
مثال مربوط به این بخش در Selector بعدی، یعنی :out-of-range ذکر شده است.
پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 5.2 | 11.0 | No | 28.0 | 10.0 | :in-range | 3 |
40- :out-of-range
برای تگ‌های input ی استفاده می‌شود که ویژگی min و max دارند. تگ‌هایی را انتخاب می‌نماید که مقدار ورودی آنها خارج از بازه‌ی min و max باشد.
<style>
:in-range {
border: 3px solid green;
}
:out-of-range {
border: 3px solid red;
}
</style>
<input type="number" min="10" max="50" /> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 5.2 | 11.0 | No | 28.0 | 10.0 | :out-of-range | 3 |