Styling Placeholder Text của thẻ input với CSS

Thuộc tính Placeholder là gì?

Thuộc tính placeholder là thuộc tính mới trong HTML5 dành cho thẻ <input> và <textarea> . Tác dụng của placeholder là cung cấp thêm thông tin cho người dùng, giúp họ biết cần nhập dữ liệu gì.

Như bạn có thể thấy ở form dưới đây:

Trình duyệt hỗ trợ

Thuộc tính placeholder được hầu hết các trình duyệt hỗ trợ, bạn có thể xem thêm ở đây https://caniuse.com/#feat=input-placeholder

Những thẻ input type dùng placeholder: Gồm các input type sau: text, search, url, tel, email, password và textarea.

Vấn đề bây giờ là bạn muốn style cho văn bản placeholder đó thì làm như thế nào.

Style text placeholder với CSS

Để style cho văn bản placeholder bạn sử dụng thuộc tính ::placeholder trong CSS. Hầu hết các trình duyệt hiện đại đều hỗ trợ điều này, nhưng đối với các trình duyệt cũ hơn, browsers prefixes sẽ được yêu cầu.

::placeholder { 
  color: deeppink;
  font-size: 5rem;
  text-transform: uppercase;
}

HTML : <input placeholder="CSS Placeholder">

Có thể bạn muốn xem:

• 50+ thuộc tính thú vị trong CSS
• Service Worker, Progressive Web Apps là gì? – Phần 1
• Service Worker, Progressive Web Apps là gì? – Phần 2
• Cài đặt WordPress với Caddy web server trên Ubuntu 18.04

Thêm Vendor Prefixes

Cú pháp sử dụng dưới đây được hỗ trợ bởi hầu hết các trình duyệt hiện đại:

/* MODERN BROWSER */
::placeholder { 
  color: deeppink;
}

Nhưng đối với một số trình duyệt hoặc trình duyệt cũ hơn, bạn sẽ cần sử dụng tiền tố của nhà cung cấp.

/* WebKit, Edge */
::-webkit-input-placeholder {
  color: deeppink;
}
/* Firefox 4-18 */
:-moz-placeholder { 
  color: deeppink;
  opacity: 1;
}
/* Firefox 19+ */
::-moz-placeholder { 
  color: deeppink;
  opacity: 1;
}
/* IE 10-11 */
:-ms-input-placeholder { 
  color: deeppink;
}
/* Edge */
::-ms-input-placeholder { 
  color: deeppink;
}
/* MODERN BROWSER */
::placeholder { 
  color: deeppink;
}

Các thuộc tính style được hỗ trợ cho placeholder

Đây là danh sách tất cả các style propeties mà bạn có thể áp dụng cho văn bản placeholder của mình:

• background properties
• color
• font properties
• letter-spacing
• line-height
• opacity
• text-decoration
• text-indent
• text-transform
• vertical-align
• word-spacing

Xem Demo Styling

Lưu ý: Đối với style css Vendor Prefixes, bạn không thể gộp các Vendor Prefixes lại thành một dòng và phân cách bởi dấu phẩy (,) như style css cho các element. Như vậy nó sẽ không hoạt động.

/* This not working */
::placeholder, 
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder{ 
  color: deeppink;
  font-size: 5rem;
  text-transform: uppercase;
}