Placeholder CSS

By default, placeholder text has a light gray color, The ::placeholder CSS pseudo-element represents the placeholder text of a form element. Placeholder styles can be change with the following CSS rules ::-webkit-input-placeholder { color: red | gray | purple; } ::-moz-placeholder { color: red | gray | purple; } ::-ms-input-placeholder { color: red | gray | purple; } ::-moz-placeholder { color: red | gray | purple; } ::-ms-expand { color: red | gray | purple; }.

placeholder

Below are the types of CSS for change the placeholder text color.

html

<input type="text" class="form-control" placeholder="Enter Your First Name">

CSS

.form-control::-moz-placeholder {
  color: #a6347d;
  opacity: 1;
}

.form-control::-ms-input-placeholder {
  color: #a6347d;
}

.form-control::-webkit-input-placeholder {
  color: #a6347d;
}

.form-control::-ms-expand {
  border: 0;
  background-color: transparent;
}

Change placeholder text color

In this tutorial we learn that how to change the ::placeholder text color using css properties.

You can customize this code further as per your requirement.