How to change the placeholder text on an input element?

1. Changing the placeholder text
2. Styling the placeholder text for the entire project
3. Styling an individual placeholder using an ID
4. 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

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>

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>

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>

Updated on: 28/03/2025