November 16, 2022

How to Change Placeholder Text Color in HTML and CSS

In this tutorial, we will learn how to change placeholder text color in HTML and CSS. The placeholder attribute defines a brief description of the anticipated value of an input field or textarea.

In the majority of browsers, placeholder text’s default color is light grey. To change the default color of the placeholder text, you need to use the ::placeholder pseudo-element. The ::placeholder pseudo-element allows you to style the placeholder text of a form element.

In the following example, we will demonstrate how you can change the default text color of the placeholder. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have multiple elements such as div, label, and input. The div element is just a wrapper for the rest of the elements.
The label element is used to specify a label for an input field. The value of for attribute is set to the name of the corresponding input field.

Both input fields have placeholder attributes with different values.
In the head element, we have added a stylesheet (style.css) using the link element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plceholder text color change</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" placeholder="enter your name"><br><br>
        <label for="email">Email:</label>
        <input type="email" name="email" placeholder="enter your email">
    </div>
</body>

</html>

CSS

We are selecting the div element and setting the value of the text-align property to center. This is required to horizontally center align the input field.
We are selecting all placeholders using ::placeholder pseudo-element and setting the CSS color property value to red. As a result, it will change the default placeholder text color to red.

div {
    text-align: center;
}

::placeholder {
    color: red;
}

You May Also Like: