forum

Home / DeveloperSection / Forums / How to Change an HTML input's placeholder color with CSS?

Ask Question

How to Change an HTML input's placeholder color with CSS?

Revati S Misra 151 29-Aug-2023

How to Change an HTML input's placeholder color with CSS?

html css  html element 
Updated on 02-Sep-2023
Revati S Misra

Revati S Misra

Follow
Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

Can you answer this question?

Answer

1 Answers

Aryan Kumar

Aryan Kumar

02-Sep-2023

Sure, I can help you with that.

To change an HTML input's placeholder color with CSS, you can use the ::placeholder pseudo-element. The ::placeholder pseudo-element is used to style the placeholder text of an input element.

The following CSS code shows how to change the placeholder color of an input element to red:

CSS

input::placeholder {
  color: red;
}

In this code, the input::placeholder selector is used to select all input elements. The color property is set to red.

You can also use the color property to set the placeholder color of a specific input element. For example, the following CSS code will set the placeholder color of the input element with the id my-input to blue:

CSS

input#my-input::placeholder { color: blue; }

In this code, the input#my-input::placeholder selector is used to select the input element with the id my-input. The color property is set to blue.

Liked By