# Change placeholder into kanban textarea

**URL:** <https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748>\
**Category:** Ask for Help\
**Created:** [July 9, 2024, 2:25pm UTC](https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748 "2024-07-09T14:25:55Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![RUDJA](https://avatars.discourse-cdn.com/v4/letter/r/e8c25b/32.png) [@RUDJA](https://community.glideapps.com/u/RUDJA)\
**Post date:** [July 9, 2024, 2:25pm UTC](https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748/1 "2024-07-09T14:25:55Z")

</div>

Hi,

I was wondering if it was possible to change the text of this textarea inside a kanban, using some CSS, please.  
See the photo below.

Thank you in advance!

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/d/cd9d4725d875d11e7ee204d0d77749bab813166e.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 9, 2024, 11:35pm UTC](https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748/2 "2024-07-09T23:35:11Z")

</div>

Are you on the newest paid plans and have access to CSS?

---

<div class="post-metadata">

**Author:** ![RUDJA](https://avatars.discourse-cdn.com/v4/letter/r/e8c25b/32.png) [@RUDJA](https://community.glideapps.com/u/RUDJA)\
**Post date:** [July 10, 2024, 5:45am UTC](https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748/3 "2024-07-10T05:45:39Z")

</div>

Yes, I’m on the newest paid plans and have access to CSS.

Do you know how to do it in these conditions @ThinhDinh ?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [July 10, 2024, 6:03am UTC](https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748/4 "2024-07-10T06:03:11Z")

</div>

With CSS, you cannot replace the placeholder text; you can only style its properties. In other words, you can hide it.

---

<div class="post-metadata">

**Author:** ![RUDJA](https://avatars.discourse-cdn.com/v4/letter/r/e8c25b/32.png) [@RUDJA](https://community.glideapps.com/u/RUDJA)\
**Post date:** [July 10, 2024, 6:38am UTC](https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748/5 "2024-07-10T06:38:43Z")

</div>

Oh ok, thank you for your answer @Himaladin.

Do you have the code to hide it then, please?  
I prefer hide it since the placeholder text will confuse my users…

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [July 10, 2024, 6:53am UTC](https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748/6 "2024-07-10T06:53:01Z")

</div>

class name: **kanban-plcholder**

```auto
.kanban-plcholder textarea::placeholder {
  color: transparent;
}

```

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [July 10, 2024, 6:59am UTC](https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748/7 "2024-07-10T06:59:22Z")

</div>

If you want to hide everything: input or textarea.

```auto
.kanban-plcholder textarea::placeholder, .kanban-plcholder input::placeholder {
  color: transparent;
}

```

---

<div class="post-metadata">

**Author:** ![RUDJA](https://avatars.discourse-cdn.com/v4/letter/r/e8c25b/32.png) [@RUDJA](https://community.glideapps.com/u/RUDJA)\
**Post date:** [July 10, 2024, 7:55am UTC](https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748/8 "2024-07-10T07:55:46Z")

</div>

> [@Himaladin](#):
>
> ```auto
> .kanban-plcholder input::placeholder {
> color: transparent;
> }
> 
> ```

Thank you @Himaladin. It is working fine.  
It’s unfortunate that we can’t change the text, but it’s better than nothing.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [July 10, 2024, 8:03am UTC](https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748/9 "2024-07-10T08:03:14Z")

</div>

Do you want a workaround where text can be provided but it is not part of the textarea?

![Screenshot 2024-07-10 at 15.06.37](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/9/d9c23546fed2606d2c622a999fc099c8cc0f03c6.png)

---

<div class="post-metadata">

**Author:** ![RUDJA](https://avatars.discourse-cdn.com/v4/letter/r/e8c25b/32.png) [@RUDJA](https://community.glideapps.com/u/RUDJA)\
**Post date:** [July 10, 2024, 9:03am UTC](https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748/10 "2024-07-10T09:03:55Z")

</div>

What do you mean by it is not part of the textarea? Not sure I understand your point.

The best solution for me would be to replace the “description” text that you can see on my image by another “B” text for example.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [July 10, 2024, 9:13am UTC](https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748/11 "2024-07-10T09:13:14Z")

</div>

If it doesn’t refer to the same element, there is a possibility that the CSS will be unstable, for example regarding distance or how to respond to an unexpected condition. You can try it and don’t force it to work perfectly. This is a little complex.

```auto
.kanban-plcholder textarea::placeholder {
  color: transparent;
}
#page-root:has(.kanban-plcholder textarea) .kanban-plcholder .component-root > div > div > div > div > div:nth-child(2):has(textarea) > div:before {
  content: "Input here";
  position: relative;
  left: 10px;
  top: 45px;
  color: red;
  height:0;
  opacity: 0.4;
  font-weight: 500;
  pointer-events:none;
}

/* Hide when focus or empty*/
#page-root:not(:has(.kanban-plcholder textarea:empty)) .kanban-plcholder .component-root > div > div > div > div > div:nth-child(2) > div:before {
  content: "";
}

```

---

<div class="post-metadata">

**Author:** ![RUDJA](https://avatars.discourse-cdn.com/v4/letter/r/e8c25b/32.png) [@RUDJA](https://community.glideapps.com/u/RUDJA)\
**Post date:** [July 10, 2024, 1:52pm UTC](https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748/12 "2024-07-10T13:52:51Z")

</div>

> [@Himaladin](#):
>
> ```auto
> /* Hide when focus or empty*/
> #page-root:not(:has(.kanban-plcholder textarea:empty)) .kanban-plcholder .component-root > div > div > div > div > div:nth-child(2) > div:before {
> content: "";
> }
> 
> ```

Perfert ! Thank you a lot @Himaladin.  
It is exactly what I want.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [July 17, 2024, 1:53pm UTC](https://community.glideapps.com/t/change-placeholder-into-kanban-textarea/74748/13 "2024-07-17T13:53:41Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
