How to Change form input Placeholder Color in CSS


0

In this article we will see change form input placeholder color

The placeholder displays a short hint of the projected value of an form input field. It helps the user to know about the format of the input before entring a value. By Using the placeholder attribute, you can put a placeholder text to HTML input field using placeholder attribute.

Normally, the color of the placeholder text is grey by default in most browser. We can also change The placeholder text color using the ::placeholder selector in CSS. Custom placeholder color is very valuable to make the input filed UI cool with HTML form. In this tutorial snippet, we will show you how to change the form input placeholder color element using CSS.

The ::placeholder selector (pseudo-element) give us permission to customize the style of the placeholder text in the form input fields. The given code will changes the placeholder text color to red (or whatever color you want)with ::placeholder element using CSS.


<input type="text" placeholder="Enter your email...">

The given CSS will change the placeholder color to all major browsers.

::-webkit-input-placeholder { /* Chrome, Opera, and Safari */
  color: red;
}
:-moz-placeholder { /* Firefox 18- */
  color: red;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
}
:-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}

Also Read: Create a Link scroll to a Specific section of a Page in HTML CSS


Like it? Share with your friends!

0
Developer

0 Comments