: dalam jarak - Trik CSS

Anonim

The :in-rangepemilih pseudo dalam CSS perlawanan elemen input apabila nilai mereka adalah dalam julat yang ditetapkan sebagai boleh diterima. Ini adalah sebahagian daripada spesifikasi CSS Selectors Level 4 yang kini ada dalam Draf Editor.

input:in-range ( border: 5px solid green; )

Saya percaya ia hanya relevan pada input(type=number). Input julat tidak membenarkan nilai di luar min / maxnya dan tidak masuk akal pada jenis input lain. Mungkin input teks-y dengan panjang maksimum, tetapi tingkah laku yang ada pada kebanyakan penyemak imbas adalah untuk mengelakkan kemasukan melebihi nilai maksimum.

Demo

Sama seperti kod di atas, input ini akan mempunyai sempadan hijau apabila nilainya antara 5 dan 10.

Sokongan penyemak imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
53 50 Tidak 79 10.1

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 85 81 10.3

Harta yang berkaitan

Almanak pada 1 Jul 2020

:luar kawasan

input:out-of-range ( border: 5px solid red; ) Geoff Graham