Placeholder CSS | How To Change Input Placeholder Color

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; }.

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.

Clear text filed on focus

Clear HTML5 placeholder attribute text on focus in Chrome and other browser

You can clear placeholder text from input field on mouse click using on focus and on blur.

<input type="text" placeholder="enter your text" onfocus="this.placeholder=''" onblur="this.placeholder='enter your text'" />  

You can customize this code further as per your requirement.

---

Learn HTML/CSS from W3 School Website

• HTML/CSS