Trong CSS, khi cần chọn và điều chỉnh các phần tử có thuộc tính placeholder đang hiển thị, bạn có thể sử dụng một pseudo-class đặc biệt tên là :placeholder-shown. Đây là một công cụ mạnh mẽ giúp bạn tạo ra các định dạng giao diện người dùng trực quan và hấp dẫn hơn.
Pseudo-class :placeholder-shown có thể được áp dụng cho bất kỳ phần tử nào có thuộc tính placeholder, tuy nhiên, nó phổ biến nhất với các thẻ <input> và <textarea>. Khi placeholder của một trường nhập liệu đang hiển thị, pseudo-class này cho phép bạn thay đổi giao diện của trường đó để cải thiện trải nghiệm người dùng.
Ứng dụng cơ bản của :placeholder-shown
Giả sử bạn có một form đơn giản với một trường nhập liệu. Bạn muốn thay đổi màu viền của trường nhập liệu khi placeholder đang hiện lên để người dùng dễ dàng nhận thấy nó cần được điền dữ liệu. Dưới đây là cách bạn có thể làm điều đó:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input:placeholder-shown {
border: 2px solid red;
}
</style>
<title>Example Form</title>
</head>
<body>
<form>
<input type="text" placeholder="Enter your name">
</form>
</body>
</html>
Trong ví dụ này, khi placeholder trong trường nhập liệu xuất hiện (khi người dùng chưa nhập liệu), màu viền của trường sẽ chuyển thành màu đỏ.
Tính tương thích của :placeholder-shown
Pseudo-class :placeholder-shown được hỗ trợ bởi hầu hết các trình duyệt hiện đại như Chrome, Firefox, Edge và Safari. Tuy nhiên, nếu bạn cần hỗ trợ cho các trình duyệt cũ hơn như Internet Explorer, có thể bạn sẽ cần dùng tới các giải pháp thay thế hoặc các kỹ thuật khác.
Cách kết hợp với các pseudo-class khác
Bạn có thể kết hợp :placeholder-shown với các pseudo-class khác như :focus và :valid để tạo ra các hiệu ứng động và hấp dẫn hơn. Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input:placeholder-shown {
color: gray;
}
input:focus:placeholder-shown {
color: blue;
}
</style>
<title>Form Example</title>
</head>
<body>
<form>
<input type="text" placeholder="Enter your email">
</form>
</body>
</html>
Trong ví dụ trên, màu chữ của placeholder sẽ là màu xám. Khi người dùng click vào trường nhập liệu (kích hoạt :focus), màu chữ của placeholder chuyển thành màu xanh.
Kết luận
Pseudo-class :placeholder-shown trong CSS là một công cụ hữu ích giúp cải thiện trải nghiệm người dùng bằng cách tùy chỉnh giao diện các trường nhập liệu khi placeholder đang hiển thị. Nó được hỗ trợ bởi nhiều trình duyệt hiện đại và có thể được kết hợp với các pseudo-class khác để tạo ra những hiệu ứng thú vị và trực quan hơn. Đừng ngần ngại thử nghiệm và sáng tạo để mang đến những trải nghiệm tốt nhất cho người dùng trên trang web của bạn.
Comments