Việc sử dụng thuộc tính :out-of-range trong CSS giúp bạn dễ dàng tùy chỉnh giao diện của các phần tử dựa trên giá trị nhập vào. Các phần tử có kiểu giá trị xác định, như số, ngày tháng hoặc các giá trị nằm trong khoảng xác định, sẽ được đánh dấu khi giá trị này nằm ngoài phạm vi cho phép.
Khái niệm về :out-of-range
Thuộc tính :out-of-range là một pseudo-class trong CSS, cho phép bạn chọn các phần tử đầu vào (input) có giá trị nằm ngoài khoảng mà bạn đã xác định. Các khoảng giá trị này thường được đặt bằng các thuộc tính min và max trong HTML.
Cách sử dụng :out-of-range
Để hiểu rõ hơn về cách sử dụng, hãy xem xét ví dụ sau:
HTML:
<form>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="65">
<span class="error-message">Age must be between 18 and 65.</span>
</form>
CSS:
input:out-of-range {
border: 2px solid red;
background-color: #ffcccc;
}
input:out-of-range + .error-message {
display: block;
}
.error-message {
display: none;
color: red;
}
Trong ví dụ trên, phần tử input chỉ cho phép giá trị từ 18 đến 65. Khi người dùng nhập giá trị nằm ngoài khoảng này, phần tử input sẽ được áp dụng các kiểu dáng xác định trong :out-of-range. Cụ thể là, viền sẽ chuyển sang màu đỏ và nền sẽ có màu hồng nhạt. Đồng thời, thẻ span chứa thông điệp lỗi sẽ hiện ra để cảnh báo người dùng.
Ứng dụng thực tế
1. Đảm bảo nhập đúng định dạng:
Giả sử bạn có một trường ngày tháng và chỉ muốn người dùng nhập các ngày nằm trong khoảng thời gian cụ thể.
<form>
<label for="birthdate">Birth Date:</label>
<input type="date" id="birthdate" name="birthdate" min="2000-01-01" max="2020-12-31">
<span class="error-message">Date must be between 01/01/2000 and 12/31/2020.</span>
</form>
input:out-of-range {
border: 2px solid red;
}
input:out-of-range + .error-message {
display: block;
}
.error-message {
display: none;
color: red;
}
2. Tăng trải nghiệm người dùng:
Bằng cách sử dụng :out-of-range, bạn có thể cải thiện trải nghiệm người dùng bằng cách cung cấp phản hồi tức thì mà không cần phải gửi form và chờ phản hồi từ máy chủ.
<form>
<label for="height">Height (cm):</label>
<input type="number" id="height" name="height" min="150" max="200">
<span class="error-message">Height must be between 150 cm and 200 cm.</span>
</form>
input:out-of-range {
border: 2px dashed orange;
}
input:out-of-range + .error-message {
display: block;
color: orange;
}
.error-message {
display: none;
}
Kết luận
Pseudo-class :out-of-range là một công cụ mạnh mẽ và tiện lợi trong CSS, giúp bạn kiểm soát và quản lý các giá trị nhập vào của người dùng một cách hiệu quả. Bằng cách sử dụng nó, bạn không chỉ cải thiện giao diện mà còn giúp người dùng nhập liệu chính xác hơn, từ đó tăng cường trải nghiệm tổng thể.
Comments