::placeholder

::placeholder targets the placeholder text shown inside an <input> or <textarea> before the user has typed a value. Browsers give placeholder text a muted, low-contrast default style, and that default has historically varied enough across browsers that most real projects style it explicitly.

Basic usage

CSS

input::placeholder,
textarea::placeholder {
  color: #9ca3af;
  opacity: 1; /* Firefox applies a lower default opacity */
}

Setting opacity: 1 explicitly is a common fix because some browsers apply their own reduced opacity to placeholder text by default, making light colors appear even fainter.

Historically inconsistent, much better today

Placeholder styling once required browser-specific selectors such as ::-webkit-input-placeholder, ::-moz-placeholder, and :-ms-input-placeholder. Modern browsers now support the standard ::placeholder selector, so most projects only need the unprefixed version. You may still encounter the older forms in legacy stylesheets.

Worked example: a search input with styled placeholder

CSS

.search-input {
  padding: 0.6em 1em;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.95rem;
}

.search-input::placeholder {
  color: #9ca3af;
  font-style: italic;
}

.search-input:focus::placeholder {
  color: #cbd5e1;
}

HTML

<input
  class="search-input"
  type="search"
  placeholder="Search articles, tags, authors..."
/>

Common properties include color, opacity, font-style, font-weight, and letter-spacing.
Avoid relying on placeholder text as the only label for a field. Use a real <label> element as well for better accessibility.
Combine ::placeholder with :placeholder-shown if you need to style the input element itself when its placeholder is visible.

Note

::placeholder only affects the appearance of placeholder text. It does not control whether the placeholder is visible. To style the input element based on whether its placeholder is currently being shown, use :placeholder-shown.