شبه کلاس in-range: در CSS

:in-range Pseudo-class

شبه کلاس in-range: در CSS، فرم های <input> را هدف می گیرد که مقدار فعلی آنها ما بین مقادیر تعیین شده توسط دو صفت min و max باشد.

این شبه کلاس برای نشان دادن بازخورد بصری به کاربر کارایی بسیاری دارد.

نکته: این شبه کلاس تنها با عناصری مطابقت پیدا می کند که می توانند بازه و محدوده مقدار داشته باشند. بنابر این در غیبت این محدوده عنصر نمی تواند شبه کلاسهای in-range و out-of-range را بپذیرد.

در مثال زیر نحوه عملکرد این سودو کلاس را میبینیم:

html

<form action="" id="form1">
    <ul>
        مقادیر معتبر مابین 1 و 10 می باشند.
        <li>
          <label for="value1">مقدار شما برابر است با:</label>
          <input
            id="value1"
            name="value1"
            type="number"
            placeholder="1 to 10"
            min="1"
            max="10"
            value="12"
           />
       </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!';
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این شبه کلاس در CSS پشتیبانی می کنند.