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

من موسوعة حسوب
< CSS
لا ملخص تعديل
 
لا ملخص تعديل
 
(مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين)
سطر 17: سطر 17:
<div>
<div>
   <input type="checkbox" id="checkbox">
   <input type="checkbox" id="checkbox">
   <label for="checkbox">This label starts out lime.</label>
   <label for="checkbox">هذا العنصر يبدأ باللون الليموني</label>
</div>
</div>
<div>
<div>
   <input type="radio" id="radio">
   <input type="radio" id="radio">
   <label for="radio">This label starts out lime.</label>
   <label for="radio">هذا العنصر يبدأ باللون الليموني</label>
</div>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
سطر 82: سطر 82:
*مسودة [https://drafts.csswg.org/selectors-4/#indeterminate Selectors Level 4].
*مسودة [https://drafts.csswg.org/selectors-4/#indeterminate Selectors Level 4].
*مواصفة [https://drafts.csswg.org/css-ui-3/#indeterminate CSS Basic User Interface Module Level 3].
*مواصفة [https://drafts.csswg.org/css-ui-3/#indeterminate CSS Basic User Interface Module Level 3].
[[تصنيف:CSS]]
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Selectors]]
[[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]
[[تصنيف:CSS pseudo-class]]
[[تصنيف:CSS pseudo-class|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 15:58، 3 أكتوبر 2018

الصنف الزائف ‎:indeterminate في CSS (أي pseudo-class) يُمثِّل أيّة نماذج تكون حالتها غير معروفة (indeterminate):

input:indeterminate {
  background: lime;
}

يمكن أن يُطابِق هذا المُحدَّد العناصر الآتية:

  • صندوق تأشير checkbox الذي ضُبِطَت الخاصية indeterminate فيه إلى true عبر JavaScript.
  • أزرار الانتقاء radio عندما تكون جميع الأزرار التي لها نفس القيمة للخاصية name غير منتقاةً.
  • عناصر <progress> في الحالة غير المعروفة.

الشكل العام لهذا المحدد:

:indeterminate

أمثلة

سنُطبِّق في المثال الآتي أنماط خاصة لعناصر <label> المرتبطة بحقول النموذج ذات الحالة غير المعروفة:

<div>
  <input type="checkbox" id="checkbox">
  <label for="checkbox">هذا العنصر يبدأ باللون الليموني</label>
</div>
<div>
  <input type="radio" id="radio">
  <label for="radio">هذا العنصر يبدأ باللون الليموني</label>
</div>

شيفرة CSS:

input:indeterminate + label {
  background: lime;
}

شيفرة JavaScript:

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}

مثال عن تطبيق أنماط خاصة على عناصر <progress> إذا كانت حالتها غير معروفة (أي لم تُستعمَل الخاصية value):

<progress>

شيفرة CSS:

progress {
  margin: 4px;
}

progress:indeterminate {
  opacity: 0.5;
  background-color: lightgray;
  box-shadow: 0 0 2px 1px red;
}

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

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي مدعومة مدعومة 9.0 10.60 3.0
<progress> 6.0 6.0 10 ؟ 5.2
أزرار الانتقاء 39.0 51 غير مدعومة ؟ غير مدعومة

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