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.

Làm tròn số trong PHP với ceil(), floor() và round() 10 mẹo để trở thành một nhà phát triển tuyệt vời Cách xóa một item khỏi Array trong JavaScript Giới thiệu và sử dụng CSS Variables Cách cài đặt MongoDB trên Ubuntu 18.04 Thêm Form tính giá sản phẩm trong Woocommerce WordPress BroadcastChannel API: Giao tiếp giữa các tab hoặc cửa sổ trong trình duyệt 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

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.

How to whitelist website on AdBlocker?

How to whitelist website on AdBlocker?

  1. 1 Click on the AdBlock Plus icon on the top right corner of your browser
  2. 2 Click on "Enabled on this site" from the AdBlock Plus option
  3. 3 Refresh the page and start browsing the site