Cách thay đổi màu placeholder input HTML 5 với CSS

Chí Vỹ

Một thuộc tính placeholder trong input là một gợi ý được đặt tạm thời ở trường nhập. Bạn có thể thay thế nó bằng giá trị thực tế. Dưới đây là ví dụ về cách tạo một input đơn giản với một placeholder.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>HTML </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
   <h3> Màu placeholder mặc định trên Quantrimang.com </h3>
   <input type="text" placeholder="placeholder">
</body>
</html>

Kết quả

Đây là kết quả, bạn có thể thấy placeholder có màu xám:

Thay đổi màu Placeholder với CSS

Màu mặc định của placeholder trong hầu hết trình duyệt đều là màu xám. Thế nhưng, bạn có thể dễ dàng thay đổi placeholder bằng CSS. Ở hầu hết trình duyệt hiện đại, placeholder có thể được thay đổi bằng bộ chọn ::placeholder. Thêm màu sắc vào bộ chọn nhưng công cụ chọn này sẽ thay đổi trên các trình duyệt khác nhau.

Ví dụ:

Trong Chrome, Mozilla và Opera, màu placeholder có thể được thay đổi trong bộ chọn ::placeholder.

Trong khi đó, Internet Explorer dùng :ms-input-placeholder và Microsoft dùng :-ms-input-placeholder.

Dưới đây là ví dụ thay đổi màu placeholder bằng CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>HTML </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>  
	:-ms-input-placeholder { 
		color: black;     /* Internet Explorer 10-11 */
	}	  
	::-ms-input-placeholder { 
		color: cyan;    /* Microsoft Edge */
	}
	::placeholder { 
		color: green;     /* Firefox, Chrome, Opera */
	}
</style>  
</head>
<body>
   <h3>  Thay đổi màu placeholder </h3>
   <input type="text" placeholder="placeholder">
</body>
</html>

Kết quả:

Đây là kết quả hiện màu sắc khác nhau của placeholder trên các trình duyệt khác nhau.

Đối với trình duyệt Chrome: