---
title: "How to Change an HTML input's placeholder color with CSS?"  
description: "How to Change an HTML input's placeholder color with CSS?"  
author: "Revati S Misra"  
published: 2023-08-29  
updated: 2023-09-02  
canonical: https://www.mindstick.com/forum/159722/how-to-change-an-html-input-s-placeholder-color-with-css  
category: "html"  
tags: ["css", "html element"]  
reading_time: 1 minute  

---

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

How to Change an [HTML input](https://www.mindstick.com/forum/157343/how-to-prevent-a-user-from-adding-same-character-over-and-over-in-html-input-box-using-javascript)'s [placeholder color](https://www.mindstick.com/forum/157983/change-an-html-input-s-placeholder-color-with-css) with [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem)?

## Replies

### Reply by Aryan Kumar

Sure, I can help you with that.

To change an [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) [input](https://www.mindstick.com/forum/159209/how-can-i-read-convert-an-input-stream-into-a-string-in-java)'s [placeholder](https://www.mindstick.com/forum/1519/how-do-i-remove-a-listbox-new-item-placeholder) [color](https://www.mindstick.com/articles/77/how-to-split-form-background-color-in-c-sharp) 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

```plaintext
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

```plaintext
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.


---

Original Source: https://www.mindstick.com/forum/159722/how-to-change-an-html-input-s-placeholder-color-with-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.