read-write:

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

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

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

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

انتخابگر 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> -->

 

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

 

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

 

عناصر زیر نمونه هایی هستند که نمی توانند توسط :read-write انتخاب شوند اما انتخابگر 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> -->

 

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

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

 

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

 

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

 

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

 

 

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

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

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

 

input:-moz-read-write {
  
}

 

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