Change Placeholder Color using CSS

In this tutorial we will see how to Change Placeholder Color using CSS. ::placeholder CSS selector is used to target the placeholder text of input element and to change it's color.

Table of Contents

• HTML Code
• CSS Code
• Demo
• Video Tutorial
• More CSS Tutorials

HTML Code

HTML Code is given below, in this code we have a input tag with placeholder text.

<input type="text" placeholder="Name:">

CSS Code

CSS Code is given below, ::placeholder selector is used for Chrome, Firefox and Opera, while :ms-input-placeholder is used for Internet Explorer and ::ms-input-placeholder is used for Edge.

/* for Chrome and Firefox */
::placeholder
{
    color: #38B6FF;
    opacity: 1;
}

/* for Internet Explorer */

:ms-input-placeholder
{
    color: blue;
}

/* for Edge */

::ms-input-placeholder
{
    color: blue;
}

Demo

Check Demo

Video Tutorial

Watch our video tutorial on how to Change Placeholder Color using CSS.