Nhãn nổi là giao diện người dùng dạng đầu vào hiện đại, tiết kiệm không gian, thường được sử dụng trong Material Design và các ứng dụng khác.
Tiết kiệm không gian: Nhân đôi vai trò là nhãn và phần giữ chỗ, tiết kiệm không gian theo chiều dọc ngay cả khi diện tích màn hình bị giới hạn.
Làm rõ nội dung đầu vào: Người dùng luôn được hiển thị ý nghĩa của một trường (nhãn), cả trong và sau khi nhập, do đó người dùng không bao giờ bị nhầm lẫn.
Tương tác tinh vi: Hình ảnh động nổi lên mượt mà của nhãn được lấy nét mang lại phản hồi trực quan hiệu quả cho người dùng rằng dữ liệu đầu vào hiện đã có sẵn.
Placeholder hack: Sử dụng lớp giả :placeholder-shown\ để xác định trạng thái (đầu vào hay không) chỉ bằng CSS mà không sử dụng bất kỳ JavaScript nào. (* placeholder=" "\ ở phía HTML là yêu cầu bắt buộc)
Đảm bảo khả năng hiển thị: Khi nhãn được nâng lên, khả năng hiển thị được duy trì bằng cách giảm kích thước phông chữ (scale(0.75)\) và áp dụng phông chữ đậm (font-weight: 500\) và màu chủ đề.
Khả năng truy cập: Bằng cách liên kết thuộc tính label\ của phần tử for\ và input\ của phần tử id\, nó hỗ trợ trình đọc màn hình và chuyển động tiêu điểm khi nhấp vào nhãn. Ngoài ra, pointer-events: none\ được chỉ định để nhãn không ảnh hưởng đến hoạt động.
Bạn có thể điều chỉnh những điểm sau cho phù hợp với hệ thống thiết kế dự án của mình.
** Tô màu:** Thay đổi màu của .fli-input:focus\ và .fli-input:focus ~ .fli-label\ (hiện tại là #6366f1\) thành màu thương hiệu.
Các góc và bóng tròn: Bằng cách thay đổi border-radius\ và box-shadow\ của .fli-input\, bạn có thể điều chỉnh sang thiết kế phẳng hơn hoặc thiết kế tròn trịa và nổi bật hơn.
Cỡ chữ: Nếu bạn điều chỉnh cỡ chữ hoặc tốc độ thu nhỏ (scale(0.75)\) của nhãn, vui lòng tinh chỉnh thêm padding\ (đặc biệt là giá trị trên) của .fli-input\ để nhãn và văn bản đầu vào không trùng nhau.
<div class="fli-group">
<input type="text" id="username" class="fli-input" placeholder=" " required />
<label for="username" class="fli-label">tên người dùng</label>
</div>
<style>
.fli-group {
position: relative;
width: 100%;
max-width: 320px;
}
.fli-input {
width: 100%;
padding: 1.5rem 1.25rem 0.5rem;
font-size: 1rem;
font-family: inherit;
color: #0f172a;
background-color: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 0.75rem;
outline: none;
box-sizing: border-box;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.fli-input:hover {
border-color: #cbd5e1;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}
.fli-input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
background-color: #ffffff;
}
.fli-label {
position: absolute;
top: 1.1rem;
left: 1.25rem;
font-size: 1rem;
color: #64748b;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: left top;
}
/* Trạng thái nhập hoặc hoàn thành */
.fli-input:focus ~ .fli-label,
.fli-input:not(:placeholder-shown) ~ .fli-label {
transform: translateY(-0.6rem) scale(0.75);
color: #6366f1;
font-weight: 500;
}
/* Mất tiêu điểm nhưng vẫn nhập */
.fli-input:not(:focus):not(:placeholder-shown) ~ .fli-label {
color: #475569;
}
</style>Chrome: phiên bản mới nhất
Safari: phiên bản mới nhất
Firefox: phiên bản mới nhất
Cạnh: Phiên bản mới nhất
Lớp giả :placeholder-shown\ được hỗ trợ bởi tất cả các trình duyệt hiện đại và an toàn khi sử dụng.