MoreLesson 254Free preview

Placeholder Color

This lesson is part of How To · All levels

Summary

The color of the placeholder is set through a pseudo-element: the placeholder. You can change the color and opacity to fit the design, but the contrast should stay fairly against the background. The placeholder is not a substitute for the label, so always provide a visible label for each input column.

Key points

::placeholder targets instructional text within the input and text areas.
Commonly supported properties are color, background, font, and opacity.
Too faint a placeholder is hard to read; keep the contrast to a minimum.
Permanent labels are better for accessibility than relying on a placeholder.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.