Styling Placeholder Text của thẻ input với CSS – ntcde.com

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

Thuộc tính **placeholder** là một tính năng mới được giới thiệu trong HTML5, dành cho các thẻ `` và `

### Trình duyệt hỗ trợ

Thuộc tính **placeholder** được hầu hết các trình duyệt hiện đại hỗ trợ. Bạn có thể kiểm tra chi tiết về sự hỗ trợ này tại [caniuse.com](https://caniuse.com/#feat=input-placeholder).

### Các loại input type dùng **placeholder**

Dưới đây là danh sách các loại input type mà bạn có thể sử dụng với thuộc tính **placeholder**:
– **text**
– **search**
– **url**
– **tel**
– **email**
– **password**
– **textarea**

### Style cho văn bản **placeholder**

Nếu bạn muốn tùy chỉnh giao diện của văn bản **placeholder**, bạn có thể sử dụng pseudo-element `::placeholder` trong CSS. Hầu hết các trình duyệt hiện đại đều hỗ trợ tính năng này, nhưng đối với các trình duyệt cũ hơn, bạn sẽ cần sử dụng vendor prefixes.

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

“`html

“`

### Thêm Vendor Prefixes

Dưới đây là cách sử dụng vendor prefixes cho các trình duyệt khác nhau:

“`css
/* Modern Browser */
::placeholder {
color: deeppink;
}

/* 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;
}
“`

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

Dưới đây là danh sách các thuộc tính style mà bạn có thể áp dụng cho văn bản **placeholder**:

| Thuộc tính Style | Mô tả |
|————————-|———————————————————————–|
| **background** | Các thuộc tính liên quan đến nền |
| **color** | Màu sắc của văn bản |
| **font** | Các thuộc tính liên quan đến phông chữ |
| **letter-spacing** | Khoảng cách giữa các chữ cái |
| **line-height** | Chiều cao của dòng |
| **opacity** | Độ trong suốt |
| **text-decoration** | Trang trí văn bản |
| **text-indent** | Lề đầu dòng |
| **text-transform** | Chuyển đổi chữ hoa/chữ thường |
| **vertical-align** | Căn chỉnh theo chiều dọc |
| **word-spacing** | Khoảng cách giữa các từ |

### Lưu ý quan trọng

Khi sử dụng vendor prefixes, bạn không thể gộp tất cả các prefixes lại thành một dòng và phân cách bằng dấu phẩy (,). Điều này sẽ không hoạt động.

“`css
/* Cách này không hoạt động */
::placeholder,
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder {
color: deeppink;
font-size: 5rem;
text-transform: uppercase;
}
“`

### Xem Demo Styling

Dưới đây là một ví dụ về cách bạn có thể style cho văn bản **placeholder**:

“`html

“`

Bằng cách sử dụng thuộc tính **placeholder** và tùy chỉnh style cho nó, bạn có thể tạo ra các form nhập liệu đẹp mắt và dễ sử dụng hơn cho người dùng.