Cách tạo kiểu cho văn bản giữ chỗ nhập bằng CSS

Để tạo kiểu cho văn bản giữ chỗ của phần tử đầu vào HTML bằng CSS, bạn cần nhắm mục tiêu phần tử giả thuộc tính. Bạn làm điều đó với bộ chọn giả CSS :: .

Phần tử nhập thông thường có văn bản giữ chỗ

<input type="text" placeholder="Hello there!">

Văn bản giữ chỗ trông như thế nào với kiểu trình duyệt mặc định:

CSS

Bây giờ, hãy sử dụng CSS ::placeholder bộ chọn để làm cho văn bản trình giữ chỗ của phần tử đầu vào có màu đỏ:

input::placeholder {
    color: red;
}

Kết quả:

Lớp văn bản giữ chỗ có thể sử dụng lại

Nếu bạn không muốn tạo kiểu cho tất cả <input> của mình phần tử giữ chỗ văn bản theo cùng một cách, như mã ở trên (bằng cách nhắm mục tiêu trực tiếp phần tử đầu vào), bạn có thể sử dụng một lớp:

.custom-input-placeholder::placeholder {
    color: red;
}

Và thêm nó vào bất kỳ phần tử đầu vào nào mà bạn muốn:

<input class="custom-input-placeholder" type="text" placeholder="Hello there!">

Điều cần biết

Đừng nhầm lẫn với phần tử giả với lớp giả.

• phần tử giả đại diện cho một phần của DOM.
• lớp giả đại diện cho trạng thái của một phần tử dựa trên sự tương tác của người dùng với phần tử đó. Ví dụ::focus hoặc :active .

Sự khác biệt về cú pháp:

• phần tử giả được xác định bằng dấu hai chấm kép:::
• lớp giả được xác định bằng một dấu hai chấm duy nhất :