How to change an HTML input’s placeholder color with CSS

To change an HTML input’s placeholder color using CSS, target the placeholder pseudo-elements across different browsers with vendor prefixes. Here’s a step-by-step solution:

1. Target WebKit Browsers (Chrome, Safari, Opera):

   input::-webkit-input-placeholder {
     color: #ff0000; /* Red color */
     opacity: 1;     /* Override default opacity */
   }

2. Target Firefox 19+:

   input::-moz-placeholder {
     color: #ff0000;
     opacity: 1;
   }

3. Target Internet Explorer 10+:

   input:-ms-input-placeholder {
     color: #ff0000;
   }

4. Standard Syntax (Modern Browsers):

   input::placeholder {
     color: #ff0000;
     opacity: 1;
   }

Complete Example:

/* Vendor prefixes first */
input::-webkit-input-placeholder { /* Chrome/Safari/Opera */
  color: #ff0000;
  opacity: 1;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: #ff0000;
  opacity: 1;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: #ff0000;
}

/* Standard syntax last */
input::placeholder {
  color: #ff0000;
  opacity: 1;
}

Key Notes:

• Opacity: Some browsers (like Firefox) apply default opacity to placeholders. Setting opacity: 1 ensures full color visibility.
• Browser Compatibility: Vendor prefixes ensure coverage for older browsers. Modern browsers typically support the standard ::placeholder.
• Specificity: Apply these styles to specific inputs (e.g., input[type="text"]) if you want to target certain fields.

Result:
The input’s placeholder text will appear in red (#ff0000) across all major browsers.