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

hi xin chào mọi người nha, nay thì minh xin chia sẽ cho mọi người một chút về kiếm thức css nhé.

css placeholder

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 ?

ở đây mình có một thẻ input như đoạn code bên dưới: 

<input type="text" placeholder="Nhập mật khẩu vào đây đi">

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; }

follow website của mình để học thêm nhiều tip về css nhé. chúc các bạn thành công.