Customize placeholder color in CSS

css Share on :

The code snippet can be helpful to change HTML input placeholder color using CSS

/* SUPPORTS - chrome, firefox, opera, safari */
::placeholder {
  color: blue;
  opacity: 1;
}

/* SUPPORTS - internet explorer 10+ */
:-ms-input-placeholder { 
  color: blue;
}

/* SUPPORTS - microsoft edge */
::-ms-input-placeholder { 
  color: blue;
}

/* FOR SPECIFIC INPUT HAVING CLASS - control  */
input.control::placeholder {
    color: blue;
    opacity: 1;
}

If you are using an HTML input tag in your code and you are using a placeholder attribute in it, it will show you the output of placeholder text in grey color on most of the browsers.

To change the color of placeholder text you can use the above code snippet which will change it to blue color(You can use color value whatever you want).

Search Index Data (The code snippet can also be found with below search text)

change input placeholder color CSS

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

0 Comments

Similar code snippets

Create your own code snippets and search them using our portal and chrome extension

Programming Feeds

Learn something new everyday on Devsheet

Important Links

Join Devsheet Create new snippet Ask a Question Write an article Online JSON Viewer