: रीड-राइट /: रीड-ओनली - सीएसएस-ट्रिक्स

:read-writeऔर :read-onlyचयनकर्ताओं दो अस्थिरता प्रपत्र बनाने के आधार पर आसान स्टाइल में लक्ष्य छद्म वर्ग हैं disabled, readonlyऔर contenteditableएचटीएमएल गुण। जबकि ब्राउज़र का समर्थन उतना बुरा नहीं है, विभिन्न कार्यान्वयन काफी अस्थिर हैं।

आधिकारिक सीएसएस विनिर्देशों के अनुसार, एक :read-writeचयनकर्ता एक तत्व से मेल खाएगा जब:

• यह या तो एक विशेषता inputहै readonlyऔर न ही disabledहै।
• यह एक ऐसा है textareaजिसमें न तो है readonlyऔर न ही हैdisabled
• यह कोई अन्य संपादन तत्व है ( contenteditableविशेषता के लिए धन्यवाद )

सिंटेक्स और उदाहरण

/* Any element that is not writable */ :read-only ( ) /*… so you might want to scope it */ input:read-only, textarea:read-only, (contenteditable):read-only ( cursor: not-allowed; ) /* Any enabled text input or enabled textarea or element with the contenteditable attribute */ :read-write ( background: white; cursor: text; )

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
३६	3 *	नहीं न	१३	९

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	9.0-9.2

विशिष्टताओं में क्या अनुशंसित है और ब्राउज़र वास्तव में क्या करते हैं, के बीच एक बड़ा अंतर है। उदाहरण के लिए, यदि हम ऐनक से चिपके रहते हैं, तो प्रत्येक तत्व जो उपयोगकर्ता-संपादन योग्य है, लेकिन अक्षम ( disabledया readonly) या उपयोगकर्ता-संपादन योग्य नहीं है, उसे अयोग्य :read-onlyचयनकर्ता द्वारा लक्षित किया जाना चाहिए ।

	क्रोम	फ़ायर्फ़ॉक्स	सफारी	ओपेरा
input	:पढ़ना लिखना	:पढ़ना लिखना	:पढ़ना लिखना	:पढ़ना लिखना
input(disabled)	:पढ़ना लिखना	:पढ़ना लिखना	:पढ़ना लिखना	:पढ़ना लिखना
input(readonly)	:केवल पढ़ने के लिए	:केवल पढ़ने के लिए	:केवल पढ़ने के लिए	:केवल पढ़ने के लिए
(contenteditable)	-	:पढ़ना लिखना	-	:केवल पढ़ने के लिए
*	-	:केवल पढ़ने के लिए	-	:केवल पढ़ने के लिए

इस बीच, केवल फ़ायरफ़ॉक्स ऐसा करने के लिए लगता है, और जाहिर तौर पर बहुत अच्छी तरह से नहीं है क्योंकि यह एक disabledइनपुट के रूप में मानता है :read-write। ओपेरा के contenteditableरूप में एक तत्व को टैग नहीं करना :read-write, यह सिर्फ इसलिए है क्योंकि यह समर्थन नहीं करता है contenteditable।