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.

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:

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.

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.

Hướng dẫn deploy project Nuxt JS lên VPS 😍 Giới thiệu PM2 – Trình quản lý các ứng dụng NodeJS Thêm meta tags cho website Nuxt JS Tạo Blog đơn giản với Nuxt JS và WordPress API Cài đặt Git trên Ubuntu 18.04 Hướng dẫn cài đặt Node.js trên VPS Ubuntu 18.04 Sử dụng JavaScript Fetch API với Async/Await Cài đặt và Active WebStorm 2019.2.2 với License key 50+ thuộc tính thú vị trong CSS Cài đặt WordPress với Caddy web server trên Ubuntu 18.04

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.