CSS ::placeholder Pseudo Element

CSS ::placeholder Pseudo-Element

The ::placeholder pseudo-element styles the placeholder text inside form input fields. It allows for the customization of color, font, size, opacity, and more.

1. Syntax

::placeholder {
  color: gray;
  font-style: italic;
}

✅ This makes placeholder text gray and italic.

2. Example – Styling Input Placeholders

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Enter your name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter your email">
</form>

input::placeholder {
  color: darkgray;
  font-size: 16px;
  font-style: italic;
  opacity: 0.7;
}

✅ This makes the placeholder dark gray, 16px, italic, and 70% transparent.

3. Cross-Browser Compatibility

Different browsers require vendor prefixes for full support:

input::placeholder { color: darkgray; } /* Standard */
input::-webkit-input-placeholder { color: darkgray; } /* Chrome, Safari */
input:-moz-placeholder { color: darkgray; } /* Firefox 18- */
input::-moz-placeholder { color: darkgray; } /* Firefox 19+ */
input:-ms-input-placeholder { color: darkgray; } /* Internet Explorer */

✅ Ensures placeholders look the same across all browsers.

4. ::placeholder vs :placeholder-shown

Feature	::placeholder	:placeholder-shown
Purpose	Styles placeholder text	Target input fields when a placeholder is visible
Example	input::placeholder { color: gray; }	input:placeholder-shown { border: 2px solid red; }

✅ Use ::placeholder for styling text and :placeholder-shown for detecting empty fields.

5. Customizing Placeholder Styles

input::placeholder {
  color: blue;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}

✅ This makes the placeholder blue, bold, spaced out, and uppercase.

6. Browser Support

✅ Supported in all modern browsers (Chrome, Firefox, Edge, Safari).
❌ Not supported in Internet Explorer 11 without -ms-input-placeholder.

7. Best Practices

✔ Use ::placeholder to improve form aesthetics.
✔ Apply subtle styles (not too bold or distracting).
✔ Use :placeholder-shown for validation or interactivity.