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

من موسوعة حسوب
< CSS
لا ملخص تعديل
لا ملخص تعديل
 
(1 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 18: سطر 18:
مثال عن استخدام هذا الصنف لتحديد جميع العناصر التي لا يمكن تعديلها:
مثال عن استخدام هذا الصنف لتحديد جميع العناصر التي لا يمكن تعديلها:
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
c
<input type="text" value="Type whatever you want here.">
<input type="text" value="This is a read-only field." readonly>
<p>هذه فقرة عادية.</p>
<p contenteditable="true">يمكنك تحرير هذه الفقرة</p>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
input { min-width: 25em; }
input { min-width: 25em; }
سطر 44: سطر 47:
|مدعومة
|مدعومة
|}
|}
==مصادر ومواصفات==
==انظر أيضًا==
* صفحة الصنف الزائف <code>[[CSS/:read-write|read-write:]]</code> الذي يُمثِّل أي عنصر فيه محتوى نصي يمكن للمستخدم تعديله.
 
== مصادر ومواصفات ==
*معيار [https://html.spec.whatwg.org/multipage/#selector-read-only HTML Living Standard].
*معيار [https://html.spec.whatwg.org/multipage/#selector-read-only HTML Living Standard].
*مواصفة [http://www.w3.org/TR/html5/#selector-read-only HTML5].
*مواصفة [http://www.w3.org/TR/html5/#selector-read-only HTML5].

المراجعة الحالية بتاريخ 19:41، 24 أكتوبر 2018

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

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

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

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

:read-only

أمثلة

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

<input type="text" value="Type whatever you want here.">
<input type="text" value="This is a read-only field." readonly>
<p>هذه فقرة عادية.</p>
<p contenteditable="true">يمكنك تحرير هذه الفقرة</p>

شيفرة 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- مدعومة مدعومة مدعومة

انظر أيضًا

  • صفحة الصنف الزائف read-write: الذي يُمثِّل أي عنصر فيه محتوى نصي يمكن للمستخدم تعديله.

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