الفرق بين المراجعتين لصفحة: «CSS/:indeterminate»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
سطر 17: | سطر 17: | ||
<div> | <div> | ||
<input type="checkbox" id="checkbox"> | <input type="checkbox" id="checkbox"> | ||
<label for="checkbox"> | <label for="checkbox">هذا العنصر يبدأ باللون الليموني</label> | ||
</div> | </div> | ||
<div> | <div> | ||
<input type="radio" id="radio"> | <input type="radio" id="radio"> | ||
<label for="radio"> | <label for="radio">Thهذا العنصر يبدأ باللون الليموني</label> | ||
</div> | </div> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> |
مراجعة 15:55، 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">Thهذا العنصر يبدأ باللون الليموني</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 | غير مدعومة | ؟ | غير مدعومة |
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.
- مسودة Selectors Level 4.
- مواصفة CSS Basic User Interface Module Level 3.