CSS

How To Change the Input Placeholder Color Using CSS?

In this article, we will discuss How To Change the Input Placeholder Color Using CSS? By default, the input placeholder text is showing in light gray color, and no any standard CSS property to style it. we can change the placeholder color using the non-standard ::placeholder selector. Note that by default Firefox uses a lower opacity to the placeholder, so we need to change opacity: 1 to fix this. as shown in the following example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Placeholder text color with CSS</title>
<style>
    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */    color: red;
    opacity: 1; /* Firefox */  }

  :-ms-input-placeholder { /* Internet Explorer 10-11 */    color: red;
  }

  ::-ms-input-placeholder { /* Microsoft Edge */    color: red;
  }
</style>
</head>
<body>
    <form>
        <input type="text" placeholder="You Name">
    </form>
</body>
</html>

Result: