Placeholder selector trong CSS pseudo-element được dùng để thiết kế placeholder text. Selector này cho phép thay đổi màu sắc và kiểu dáng của văn bản placeholder.
::first-line pseudo-element là tập hợp con duy nhất của CSS properties có thể áp dụng với ::placeholder. Mặc định, placeholder text có màu xám nhạt hoặc mờ trên hầu hết trình duyệt.
Syntax:
::placeholder {
// CSS property
}Chúng ta sẽ tìm hiểu về ::placeholder selector và cách triển khai nó thông qua các ví dụ.
Example 1: Ví dụ này minh họa cách sử dụng ::placeholder selector để thay đổi màu chữ và màu nền của placeholder text.
HTML<!DOCTYPE html>
<html>
<head>
<title>::placeholder selector</title>
<style>
input::placeholder {
background-color: #fff;
margin: 10px;
padding: 5px;
color: Green;
}
h1 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
<h2>::placeholder selector</h2>
<p>Name:
<input placeholder="GeeksforGeeks">
</p>
</body>
</html>
Output:
Example 2: Ví dụ này minh họa ::placeholder selector để thiết lập placeholder text với thuộc tính mô tả giá trị dự kiến. Thuộc tính này giúp xác định gợi ý cho input field.
HTML<!DOCTYPE html>
<html>
<head>
<title>::placeholder selector</title>
<style>
h1 {
color: green;
}
body {
text-align: center
}
input::placeholder {
background-color: white;
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>::placeholder Selector </h2>
<input type="text" placeholder="Geeks">
<input type="text" placeholder="Computer Science">
</body>
</html>
Output:
Supported Browser: Các trình duyệt được hỗ trợ bởi ::placeholder selector được liệt kê dưới đây:
- Google Chrome 57.0
- Microsoft Edge 79.0
- Firefox 51.0
- Safari 10.1
- Opera 44.0