How to Change an HTML5 Input Placeholder Color With CSS

Jay Singh Feb 02, 2024

CSS CSS Color

How to Change an HTML5 Input Placeholder Color With CSS

If you want to make your website or web page stand out from the crowd, the HTML code alone isn’t going to cut it; you’ll need to style it with CSS properties.

In CSS, various properties and selectors can be used to style HTML5 components and make them more user-friendly. In HTML5, different CSS selectors change text color, font, font size, text alignment, and many other things.

In HTML5, the placeholder property guides users through the right syntax by displaying an example. Before the user inputs a value, the browser indicates the format.

It’s most commonly used with HTML’s input element, which allows users to submit information such as their name, age, phone number, etc. This article explains how to alter the placeholder color of an HTML5 input with CSS.

Change an HTML5 Input Placeholder Color With CSS

In this example, the :: placeholder selector is used in Style CSS to change the color of the placeholder text to orange. We utilized the <input> tag to enter the text.

It will only take letters. The placeholder property is also utilized for user convenience.

Example 1:

<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>Placeholder Color</title>
        <style>
            ::placeholder{/* syntax for Chrome,Firefox,Mozilla browsers*/
            color:orange;
            }
        </style>
    </head>
    <body>
        <p>Please enter your name</p>
        <input type="text" placeholder="Text only">
    </body>
</html>

In the example below, we started by creating an HTML form using the <form> element. Using the ::placeholder selector, the color of the placeholder text is modified for all three <input> components in the form.

Example 2:

<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>Placeholder2</title>
    </head>
    <style>
        ::placeholder{
        color: green;
        }
    </style>
    <body>
        <h2> Please fill the form</h2>
        <form>
            <input type="text" placeholder="Enter your name"><br>
            <input type="number" placeholder="Enter your age"><br>
            <input type="email" placeholder="Enter your email-id">
        </form>
    </body>
</html>

Change an HTML5 Input Placeholder Color With CSS

Related Article - CSS Color