الصنف ‎:out-of-range

من موسوعة حسوب
< CSS
مراجعة 15:34، 28 يناير 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
اذهب إلى التنقل اذهب إلى البحث

الصنف الزائف ‎: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>Values between 1 and 10 are valid.
    <li>
      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
      <label for="value1">Your value is </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.

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