Làm thế nào style color placeholder input ?

21/03/2020

« Bài trước

Placeholder input là gì ?

Placeholder input là đoạn text giữ chỗ cho thẻ input. Khi thẻ input chưa có giá trị (rỗng) thì đoạn text trong placeholder sẽ hiển thị, ngược lại khi ta bắt đầu gõ chữ vào input thì đoạn text placeholder sẽ ẩn đi.

Để sử dụng ta chỉ cần thêm thuộc tính placeholder cho thẻ input. Và ta có thể style placeholder bằng css với các thuộc tính như style text bình thường: color, font-size, font-weight,....

Màu sắc mặc định của placeholder trên tất cả các trình duyệt là màu xám nhạt (light grey).

Cú pháp style placeholder input như thế nào ?

Sau đây là cú pháp cơ bản để style placeholder input:

::placeholder { /* Thuộc tính css; */ }

Ngoài ra để nó hoạt động tốt trên các trình duyệt khác, ta có thể thêm tiền tố vào phía trước nó. Xem ví dụ bên dưới:

::-webkit-input-placeholder { /* Edge */ color: #000; font-size:12px; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #000; font-size:12px; } ::placeholder { color: #000; font-size:12px; }

« Bài trước
Back to top