read-only:

read-only یک pseudo-class است که برای انتخاب و استایل دهی به عناصری که توسط کاربر قابل ویرایش نیستند مورد استفاده قرار می گیرد.

 
عناصر قابل ویرایش به شرح زیر می باشند:

• هر نوع عنصر <input> که ویژگی(attribute)های disabled و readonly را نداشته باشد.
• عنصر <textarea> که ویژگی های disabled و readonly را نداشته باشد.
• هر عنصری غیر از این دو که دارای ویژگی contenteditable باشد.

در مورد ویژگی contenteditable می توانید در این مطلب بیشتر بخوانید.

انتخابگر read-only می تواند هر عنصری که از عناصر بالا نباشد را هدف قرار دهد.

مثال های زیر نمونه هایی هستند که می توانند توسط :read-only انتخاب شوند:

 

<input type="text" disabled>

<input type="email" readonly>

<input type="number" disabled>

<textarea name="" id="" cols="20" rows="10" readonly> </textarea>

<div class="test"></div>

<section contenteditable="false"></section> <!-- == <section></section> -->

 

در CSS می توان از این انتخابگر بصورت زیر استفاده کرد:

 

input:read-only {
  background-color: #eee;
}

 

مثال های زیر نمونه هایی هستند که در تور انتخابگر :read-only نمی افتند اما انتخابگر read-write می تواند اینها را شکار کند:

 

<input type="text">

<input type="email">

<input type="number">

<textarea name="" id="" cols="20" rows="10"> </textarea>

<section contenteditable="true"></section> <!-- == <section contenteditable ></section> -->

 

اگرچه که این رویه استاندارد می باشد اما رفتار برخی مرورگرها در مورد این دو انتخابگر متفاوت است و امکان دارد استایل هایی که برای انتخابگر read-only می نویسیم در مرورگری دیگر برای عناصر read-write اعمال شود و بالعکس. برای بررسی بیشتر این قضیه به قسمت پشتیبانی مرورگرها و دمو مراجعه کنید.

 
مانند دیگر pseudo-classها این انتخابگر نیز می تواند با دیگر انتخابگرها بصورت زنجیره ای مورد استفاده قرار بگیرد:

 

div:read-only:hover {
  background-color: #ccc;
  border: 1px solid #999;
}

 

دموی زیر را با دقت بررسی کنید:

 

See the Pen read-only, read-write pseudo-classes by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

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

انتخابگر :read-only در مرورگرهای کروم, سافاری, اپرا پشتیبانی می شود اما اینترنت اکسپلورر آن را پشتیبانی نمی کند.

در فایرفاکس نیاز است از پیشوند -moz- بصورت زیر استفاده کنیم:

 

input:-moz-read-only {
  
}

 

در مرورگرهای کروم, فایرفاکس, اپرا و سافاری inputهایی که دارای ویژگی disabled می باشند با انتخابگر read-write انتخاب می شوند نه read-only که خلاف استاندارد است.