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

المراجعة الحالية بتاريخ 10:45، 21 أكتوبر 2018

الصنف الزائف ‎:in-range في CSS (أي pseudo-class) يُمثِّل أيّة عناصر <input> التي تكون قيمتها ضمن المجال المسموح المُحدَّد عبر الخاصيتين min و max.

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

هذا المُحدِّد مفيد لإعطاء المستخدم دلالةً بصريةً على أنَّ القيمة الحالية للحقل ضمن الحدود المسموحة. لاحظ أنَّ هذا الصنف الزائف يُطبَّق على العناصر التي يمكن أن نُحدِّد مجال القيم التي تقبلها. الشكل العام لهذا المحدد:

:in-range

أمثلة

مثال عن استخدام الصنف الزائف ‎:in-range والصنف الزائف ‎:out-of-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.

انظر أيضًا

صفحة الصنف الزائف out-of-range: الذي يُمثِّل أيّة عناصر <input> التي لا تكون قيمتها ضمن المجال المسموح المُحدَّد عبر الخاصيتين min وmax.

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

معيار HTML Living Standard.
مسودة Selectors Level 4.

@@ سطر 14: / سطر 14: @@
 مثال عن استخدام الصنف الزائف <code>‎:in-range</code> والصنف الزائف <code>‎[[CSS/:out-of-range|:out-of-range]]</code> لإعطاء دلالة بصرية على أنَّ قيمة الحقل ضمن الحدود المسموحة:<syntaxhighlight lang="html">
 <form action="" id="form1">
-   <ul>Values between 1 and 10 are valid.
+   <ul>القيم بين 1 و 10 كلها صالحة
      <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>
+       <label for="value1">القيمة هي </label>
      </li>
    </ul>
@@ سطر 67: / سطر 67: @@
 متصفح Edge يدعم هذا الصنف الزائف على النقيض من متصفح IE.
-==مصادر ومواصفات==
+==انظر أيضًا==
+* صفحة الصنف الزائف <code>[[CSS/:out-of-range|out-of-range:]]</code> الذي يُمثِّل أيّة عناصر <code>[[HTML/input|<input>]]</code> التي لا تكون قيمتها ضمن المجال المسموح المُحدَّد عبر الخاصيتين <code>min</code> و<code>max</code>.
+== مصادر ومواصفات ==
 *معيار [https://html.spec.whatwg.org/multipage/scripting.html#selector-in-range HTML Living Standard].
 *مسودة [https://drafts.csswg.org/selectors-4/#in-range-pseudo Selectors Level 4].