الفرق بين المراجعتين ل"CSS/:out-of-range"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
سطر 67: | سطر 67: | ||
متصفح Edge يدعم هذا الصنف الزائف على النقيض من متصفح IE. | متصفح Edge يدعم هذا الصنف الزائف على النقيض من متصفح IE. | ||
− | ==مصادر ومواصفات== | + | ==انظر أيضًا== |
+ | * صفحة الصنف الزائف <code>[[CSS/:in-range|in-range:]]</code> الذي يُمثِّل أيّة عناصر <code>[[HTML/input|<input>]]</code> التي تكون قيمتها ضمن المجال المسموح المُحدَّد عبر الخاصيتين <code>min</code> و <code>max</code>. | ||
+ | |||
+ | == مصادر ومواصفات == | ||
*معيار [https://html.spec.whatwg.org/multipage/scripting.html#selector-out-of-range HTML Living Standard]. | *معيار [https://html.spec.whatwg.org/multipage/scripting.html#selector-out-of-range HTML Living Standard]. | ||
*مسودة [https://drafts.csswg.org/selectors-4/#out-of-range-pseudo Selectors Level 4]. | *مسودة [https://drafts.csswg.org/selectors-4/#out-of-range-pseudo Selectors Level 4]. |
المراجعة الحالية بتاريخ 19:39، 24 أكتوبر 2018
الصنف الزائف :out-of-range
في CSS (أي pseudo-class) يُمثِّل أيّة عناصر <input>
التي لا تكون قيمتها ضمن المجال المسموح المُحدَّد عبر الخاصيتين min
و max
.
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
}
هذا المُحدِّد مفيد لإعطاء المستخدم دلالةً بصريةً على أنَّ القيمة الحالية للحقل خارج الحدود المسموحة. لاحظ أنَّ هذا الصنف الزائف يُطبَّق على العناصر التي يمكن أن نُحدِّد مجال القيم التي تقبلها. الشكل العام لهذا المحدد:
:out-of-range
أمثلة
مثال عن استخدام الصنف الزائف :out-of-range
والصنف الزائف :in-range
لإعطاء دلالة بصرية على أنَّ قيمة الحقل ضمن الحدود المسموحة:
<form action="" id="form1">
<ul>القيم بين 1 و 10 صالحة
<li>
<input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
<label for="value1">القيمة هي </label>
</li>
</ul>
</form>
شيفرة CSS:
li {
list-style: none;
margin-bottom: 1em;
}
input {
border: 1px solid black;
}
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
border: 2px solid red;
}
input:in-range + label::after {
content: 'okay.';
}
input:out-of-range + label::after {
content: 'out of range!';
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 10.0 | 29.0 | غير مدعومة | 11.0 | 5.2 |
متصفح Edge يدعم هذا الصنف الزائف على النقيض من متصفح IE.
انظر أيضًا
- صفحة الصنف الزائف
in-range:
الذي يُمثِّل أيّة عناصر<input>
التي تكون قيمتها ضمن المجال المسموح المُحدَّد عبر الخاصيتينmin
وmax
.
مصادر ومواصفات
- معيار HTML Living Standard.
- مسودة Selectors Level 4.