Cách style Input Placeholder Text với CSS

Để style placeholder text của HTML input element với CSS, bạn cần target pseudo-element attribute. Bạn làm vậy với CSS pseudo selector ::.

Input element thường có placeholder text

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

Placeholder text trông như thế nào với style mặc định của trình duyệt:

CSS

Bây giờ hãy dùng CSS selector ::placeholder để làm placeholder text của input element thành màu đỏ:

input::placeholder { color: red; }

Kết quả:

Class placeholder text tái sử dụng

Nếu bạn không muốn style tất cả placeholder text của <input> element giống nhau, như code trên làm (bằng cách target trực tiếp input element), bạn có thể dùng class:

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

Và thêm class đó vào bất kỳ input element nào bạn muốn:

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

Điều tốt để biết

Đừng nhầm lẫn pseudo-elements với pseudo-classes.

• Pseudo-elements đại diện cho một phần của DOM.
• Pseudo-classes đại diện cho trạng thái của element dựa trên tương tác của user. Ví dụ: :focus, hoặc :active.

Khác biệt cú pháp:

• Pseudo-elements định nghĩa bằng double colon: ::
• Pseudo-classes định nghĩa bằng single colon :