Syntax error How to change the color of the placeholder attribute with CSS?

How to change the color of the placeholder attribute with CSS?

To change the color of the placeholder attribute with CSS, we will be using ::placeholder pseudo-element which will update the default color of placeholder.

In this article, we are having a text type input field with default placeholder color, our task is to change the color of the placeholder attribute with CSS.

Steps to Change the Placeholder Color

  • We have used input tag to create an input field and used label tag to define the input field.
  • Then, we have used ::placeholder psuedo pseudo-element selector to select the placeholder and change it's color using CSS color property.

Example

Here is a complete example code implementing above mentioned steps to change the color of the placeholder attribute using placeholder pseudo-element.

<!DOCTYPE html>
<html>
<head>
   <style>
      ::placeholder {
         color: #04af2f;
      }
   </style>
</head>
<body>
    <h3>
        Changing Placeholder Color with CSS
    </h3>
    <p>
        In this example we have used <strong>::placeholder
        </strong> pseudo-element to change the placeholder
        Color with CSS.
    </p>
    <label for="example">Enter your name: </label>
    <input type="text" id="example" 
           placeholder="Tutorialspoint"/>
</body>
</html>

Conclusion

To change the color of the placeholder attribute with CSS is a very simple process which can be achieved using CSS ::placeholder pseudo-element selector. In this article, we discussed a very simple example to change the placeholder color.

Updated on: 2024-09-11T15:43:33+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements