الفرق بين المراجعتين لصفحة: «CSS/:read-only»

مراجعة 10:05، 11 أكتوبر 2018

الصنف الزائف ‎:read-only في CSS (أي pseudo-class) يُمثِّل أي عنصر فيه محتوى نصي لا يمكن للمستخدم تعديله.

/* يجب توفير سابقة لمتصفح فايرفكس */
input:-moz-read-only {
  background-color: #ccc;
}

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

لاحظ أنَّ هذا المُحدِّد لا يُحدِّد عناصر <input> التي لها الخاصية readonly فقط، وإنما يُحدِّد أي عنصر لا يمكن للمستخدم تعديله. الشكل العام لهذا المحدد:

:read-only

أمثلة

مثال عن استخدام هذا الصنف لتحديد جميع العناصر التي لا يمكن تعديلها:

شيفرة CSS:

input { min-width: 25em; }
input:-moz-read-only { background: cyan; }
input:read-only { background: cyan; }

p:-moz-read-only { background: lightgray; }
p:read-only { background: lightgray; }
p[contenteditable="true"] { color: blue; }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	مدعومة	مدعومة لكن مع السابقة `-moz-`	مدعومة	مدعومة	مدعومة

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.
مسودة Selectors Level 4.

@@ سطر 18: / سطر 18: @@
 مثال عن استخدام هذا الصنف لتحديد جميع العناصر التي لا يمكن تعديلها:
 <syntaxhighlight lang="html">
-<input type="text" value="Type whatever you want here.">
+c
-<input type="text" value="This is a read-only field." readonly>
-<p>This is a normal paragraph.</p>
-<p contenteditable="true">You can edit this paragraph!</p>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 input { min-width: 25em; }