:in-range
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2015.
:in-range là lớp giả CSS đại diện cho phần tử <input> có giá trị hiện tại nằm trong giới hạn phạm vi được chỉ định bởi các thuộc tính min và max.
Try it
label {
display: block;
margin-top: 1em;
}
input:in-range {
background-color: palegreen;
}
<form>
<label for="amount">How many tickets? (You can buy 2-6 tickets)</label>
<input id="amount" name="amount" type="number" min="2" max="6" value="4" />
<label for="dep">Departure Date: (Whole year 2022 is acceptable)</label>
<input
id="dep"
name="dep"
type="date"
min="2022-01-01"
max="2022-12-31"
value="2025-05-05" />
<label for="ret">Return Date: (Whole year 2022 is acceptable)</label>
<input id="ret" name="ret" type="date" min="2022-01-01" max="2022-12-31" />
</form>
Lớp giả này hữu ích để cung cấp cho người dùng chỉ báo trực quan rằng giá trị hiện tại của trường đang nằm trong giới hạn cho phép.
Note: Lớp giả này chỉ áp dụng cho các phần tử có (và có thể có) giới hạn phạm vi. Khi không có giới hạn như vậy, phần tử không thể ở trạng thái "in-range" hay "out-of-range".
Cú pháp
:in-range {
/* ... */
}
Ví dụ
HTML
<form action="" id="form1">
<ul>
Values between 1 and 10 are valid.
<li>
<input
id="value1"
name="value1"
type="number"
placeholder="1 to 10"
min="1"
max="10"
value="12"
required />
<label for="value1">Your value is </label>
</li>
</ul>
</form>
CSS
li {
list-style: none;
margin-bottom: 1em;
}
input {
border: 1px solid black;
}
input:in-range {
background-color: rgb(0 255 0 / 25%);
}
input:out-of-range {
background-color: rgb(255 0 0 / 25%);
border: 2px solid red;
}
input:in-range + label::after {
content: "okay.";
}
input:out-of-range + label::after {
content: "out of range!";
}
Kết quả
Note:
<input> rỗng không được tính là ngoài phạm vi và sẽ không được chọn bằng bộ chọn lớp giả :out-of-range. Lớp giả :blank tồn tại để chọn các input trống, mặc dù tại thời điểm viết bài này vẫn đang thử nghiệm và chưa được hỗ trợ tốt. Bạn cũng có thể dùng thuộc tính required và lớp giả :invalid để cung cấp logic và tạo kiểu tổng quát hơn cho việc bắt buộc nhập input (:invalid sẽ tạo kiểu cho cả các input trống lẫn ngoài phạm vi).
Đặc tả
| Specification |
|---|
| HTML # selector-in-range |
| Selectors Level 4 # in-range-pseudo |