How to Change Placeholder Color for Textboxes in CSS

CSS Web Development Front End Technology

Using the ::placeholder pseudo-element, we can change the placeholder text color for textboxes.

The syntax of CSS ::placeholder pseudo-element is as follows −

::placeholder {
   attribute: /*value*/
}

Example

The following examples illustrate CSS :: placeholder pseudo-element.

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
input:last-child::placeholder {
   color: cornflowerblue;
}
</style>
</head>
<body>
<input type="text" placeholder="Default color" />
<input type="text" placeholder="Check my new color :D" />
</body>
</html>

Output

This will produce the following result −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
input::placeholder {
   color: fuchsia;
}
input {
   margin: 2%;
   width: 100%;
}
div {
   display: flex;
   flex-direction: column;
   margin: 3%;
   padding: 3%;
   text-align: center;
   align-items: center;
   box-shadow: inset 0 0 30px brown;
}
button {
   width: 40%;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="Normal placeholder" />
<input type="email" placeholder="somenone@somewhere.com" />
<button>dummy btn</button>
</div>
</body>
</html>

Output

This will produce the following result −

AmitDiwan

Published on 12-Mar-2021 10:50:35

Previous Page Print Page