:in-range
Selectorul pseudo în CSS se potrivește cu elementele de intrare atunci când valoarea lor este în intervalul specificat ca fiind acceptabil. Face parte din specificația CSS Selectors Nivelul 4 care se află în prezent în Proiectul Editorului.
input:in-range ( border: 5px solid green; )
Cred că este relevant doar pe input(type=number)
. Intrările de gamă nu permit valori în afara min / max și nu are prea mult sens pentru niciun alt tip de intrare. Poate că intrările text-y cu o lungime maximă, dar comportamentul celor din majoritatea browserelor este de a împiedica oricum intrarea peste max.
Demo
La fel ca codul de mai sus, această intrare va avea o margine verde atunci când valoarea sa este cuprinsă între 5 și 10.
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
Crom | Firefox | IE | Margine | Safari |
---|---|---|---|---|
53 | 50 | Nu | 79 | 10.1 |
Mobil / Tabletă
Android Chrome | Android Firefox | Android | Safari iOS |
---|---|---|---|
88 | 85 | 81 | 10.3 |
Proprietăți conexe
Almanah pe 1 iulie 2020: în afara intervalului
input:out-of-range ( border: 5px solid red; )
Geoff Graham