> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to change the placeholder text on an input element?

**Any input field used in a form can have a placeholder text that helps users better identify the fields. Here is how to change and edit them.**

|    |    |
| --- | --- |
| [1. Changing the placeholder text](#2-changing-the-placeholder-text) | [2. Styling the placeholder text for the entire project](#2-styling-the-placeholder-text-for-the-entire-project) |
| [3. Styling an individual placeholder using an ID](#2-styling-an-individual-placeholder-using-an-id) | [4. Styling an individual placeholder using a CSS class](#2-styling-an-individual-placeholder-using-a-css-class) |

## Chancing the placeholder text

To change the placeholder text for an input field you just need to:

* Select the input you want to edit
* Go to the **Right panel **and in the **Visual tab** look for the **HTML section**.
* **Click the triangle icon** to extend the dropdown if needed
* Look for the **Placeholder field** and **change the text**

![Changing placeholder text](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/input-placeholder_103gn9j.gif)

## Styling the placeholder text for the entire project

To change the styling on an **ALL the inputs in your project**, go to **Project Settings** -> **Custom code**, and in the **Head section** add the following code snippet:

```
<style>
::-webkit-input-placeholder { 
  color: pink;
}
</style>
```

| Change the **color: pink; property** in the example above to any CSS styling you want.

## Styling an individual placeholder using an ID

To add an ID to your input, select the input element, go to the **Right panel** and in the **HTML section** add the name you want (ex: styled-placeholder) in the **ID** input.

Go to the **Left panel**, in the **Elements tab** and from the **Media section** drag the **Embed Code** element where your input is and paste the following code.

```
<style>
#styled-placeholder::-webkit-input-placeholder { 
  color: red;
}

</style>
```

||| The changes will not be visible when previewing the project. They will only be visible once the project is deployed.

## Styling an individual placeholder using a CSS class

To add a CSS class to your input, select the input element, go to the **Right panel** and in the **Classes section** add the name you want (ex: styled-placeholder) in the input and create the class.

From the **Left panel**, in the **Elements tab** in the **Media section** drag the **Embed Code** element where your input is and paste the following code.

```
<style>
.styled-placeholder::-webkit-input-placeholder { 
  color: red;
}

</style>
```

||| The changes will not be visible when previewing the project. They will only be visible once the project is deployed.

|| Make sure to change the styled-placeholder text with the ID or CSS class that you set up beforehand.