# Remove placeholder text when the field is clicked \[RESOLVED\]

**URL:** <https://community.gravityforms.com/t/remove-placeholder-text-when-the-field-is-clicked-resolved/12016>\
**Category:** Get Help\
**Tags:** placeholder, css\
**Created:** [February 21, 2022, 10:25pm UTC](https://community.gravityforms.com/t/remove-placeholder-text-when-the-field-is-clicked-resolved/12016 "2022-02-21T22:25:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![user6192c13d9a9ff541](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user6192c13d9a9ff541/32/4647_2.png) [@user6192c13d9a9ff541](https://community.gravityforms.com/u/user6192c13d9a9ff541)\
**Post date:** [February 21, 2022, 10:25pm UTC](https://community.gravityforms.com/t/remove-placeholder-text-when-the-field-is-clicked-resolved/12016/1 "2022-02-21T22:25:51Z")

</div>

We are using placeholder text in a single line text field, as shown in the screenshot. How can we make the placeholder text disappear when a user clicks in the field?

 ![Screen Shot 2022-02-21 at 5.22.57 PM](https://us1.discourse-cdn.com/flex020/uploads/gravityforms1/original/2X/0/0a6bd75e415fbe68daacb6fc945a399fba97dbc9.png)

---

<div class="post-metadata">

**Author:** ![chrishajer](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/chrishajer/32/88_2.png) [@chrishajer](https://community.gravityforms.com/u/chrishajer)\
**Post date:** [February 21, 2022, 11:08pm UTC](https://community.gravityforms.com/t/remove-placeholder-text-when-the-field-is-clicked-resolved/12016/2 "2022-02-21T23:08:33Z")

</div>

Hi John. If you want the placeholder text to disappear when the field has focus, you can use this CSS:

```auto
input:focus::-webkit-input-placeholder {
	color : transparent;
}
input:focus::-moz-placeholder {
	color : transparent;
}
input:-moz-placeholder {
	color : transparent;
}
input:focus::-webkit-input-placeholder {
	opacity : 0;
}
input:focus::-moz-placeholder {
	opacity : 0;
}
input:-moz-placeholder {
	opacity : 0;
}

```

You can add this CSS to your theme (or child theme) stylesheet or via the Appearance Customizer (Appearance \> Customize \> Additional CSS). If you have any other questions, please let us know.

---

<div class="post-metadata">

**Author:** ![user6192c13d9a9ff541](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user6192c13d9a9ff541/32/4647_2.png) [@user6192c13d9a9ff541](https://community.gravityforms.com/u/user6192c13d9a9ff541)\
**Post date:** [February 22, 2022, 4:02pm UTC](https://community.gravityforms.com/t/remove-placeholder-text-when-the-field-is-clicked-resolved/12016/3 "2022-02-22T16:02:32Z")

</div>

That did the trick, thank you!

---

<div class="post-metadata">

**Author:** ![chrishajer](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/chrishajer/32/88_2.png) [@chrishajer](https://community.gravityforms.com/u/chrishajer)\
**Post date:** [February 22, 2022, 4:08pm UTC](https://community.gravityforms.com/t/remove-placeholder-text-when-the-field-is-clicked-resolved/12016/4 "2022-02-22T16:08:02Z")

</div>