How to Change an HTML Input Placeholder Color with CSS

The input placeholder color is the color of the text that appears in an input when it is empty. By default, the placeholder color is a light gray. You can change this color with CSS. Let’s see how!

HTML

Code

<style>
  .custom-placeholder {
    border: solid 1px #ccc;
    padding: 5px 10px;
    font-size: 16px;
  }
</style>

<style>
  .custom-placeholder::placeholder {
    color: cornflowerblue;
  }
</style>

<input class="custom-placeholder" type="text" placeholder="This is placeholder text">

<input>

Related posts