How to Change an HTML Input Placeholder Color with CSS

Dan Gold

Written by Dan

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!

  .custom-placeholder {
    border: solid 1px #ccc;
    padding: 5px 10px;
    font-size: 16px;

  .custom-placeholder::placeholder {
    color: cornflowerblue;

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

Related posts

Last updated

July 13th, 2023