این آموزش در تاریخ ۱۴۰۰/۱۰/۱۵ آپدیت شده است.
آموزش شبه کلاس Read-Only در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه کلاس Read-Only در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
شبه کلاس Read-Only در CSS
با استفاده از شبه کلاس ( یا هم انتخابگر ) read-only در CSS میتوان تگ هایی را که فقط خواندنی ( Read-Only ) هستند را انتخاب و براشون استایل دلخواه تعریف کرد.
با استفاده از صفت ReadOnly میتوان مشخص کرد که آیا محتوای یک تگ فقط خواندنی باشد یا خیر.
با استفاده از شبه کلاس read-write نیز میتوان تگ هایی را که محتواشون قابل خواندن و نوشتن هستند انتخاب کرد.
| نسخه | CSS3 |
|---|
Free-Learn
مثال از شبه کلاس Read-Only در CSS
در ادامه میتوانید یک مثال از این انتخابگر / شبه کلاس را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از شبه کلاس های read-only و read-write
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> input[type="text"]:read-write { background-color:#4CAF50; color:#fff; } input[type="text"]:read-only { background-color:red; color:#fff; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه کلاس read-only در CSS پشتیبانی میکنند یا خیر.
» عددی که در کنار -moz- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوند استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )
| نام انتخابگر | Chrome | Firefox | Opera | Safari | Edge |
| read-only: | ۳۶ | ۷۸ ۳ تا ۷۷ -moz- |
۲۳ | ۹ | ۱۳ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه کلاس در CSS بصورت زیر می باشد.
|
1 2 3 |
:read-only { دستورات سی اس اس در اینجا } |
Free-Learn
نکات و توضیحات
- برای پشتیبانی این شبه کلاس در مرورگر فایرفاکس از نسخه ۳ تا ۷۷ باید از دستور پیشوندی -moz- استفاده کرد.
|
1 2 3 4 |
input[type="text"]:-moz-read-only { background-color:red; color:#fff; } |
