: în raza de acțiune - CSS-Tricks

Anonim

:in-rangeSelectorul 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