Pseudo-class ya out-of-range

Pseudo-class out-of-range huweka mtindo kwa vipengele ambavyo thamani zao zinazidi kiwango maalum. Kiwango cha thamani kinapaswa kuwekwa na sifa min na max.

Kisanifu

csskichaguli:out-of-range {
  
}

Mfano

Wacha tuweke rangi ya samawati kwa msingi wa kiingilio cha nambari, ambapo nambari zilizoingizwa ziko kwenye kiwango kutoka 1 hadi 5. Pia tuweke msingi wa rangi ya waridi, wakati thamani iliyoingizwa haiko kwenye kiwango kilichochaguliwa:

html<form>
  <p>Weka nambari kutoka 1 hadi 5</p>
  <p>
    <input type="number" min="1" max="5" value="1">
  </p>
</form>
cssinput:in-range {
  background: #C2DDFD;
}
input:out-of-range {
  background: #E37D76;
}

Результат:

Angalia pia

  • pseudo-class :in-range,
    ambayo huweka mtindo kwa vipengele vilivyo na kiwango maalum cha thamani
  • pseudo-class :invalid,
    ambayo huweka mtindo kwa kiingilio ambacho thamani isiyofaa imeingizwa
  • pseudo-class :valid,
    ambayo huweka mtindo kwa kiingilio ambacho thamani sahihi imeingizwa