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><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:

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;
}
Oh My Zsh: Nâng cao trải nghiệm terminal với giao diện đẹp và các plugin tăng hiệu suất! Git cherry-pick là gì? Cách sử dụng và ví dụ Git Rebase: Gộp nhiều commit thành một để tối ưu hóa lịch sử commit 11 tính năng JavaScript mới tuyệt vời trong ES13 (ES2022) CSS diệu kỳ: Các thuộc tính CSS mà bạn có thể chưa biết Auto deploy projects với GitHub Actions – sử dụng ssh-action WordPress Gutenberg Block Server Side Render Add, Upload image trong Gutenberg Block Development Tạo Block Controls – Block Toolbar và Settings Sidebar trong WordPress Gutenberg Làm quen với các components thường dùng khi tạo Gutenberg Block

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.