# Input style when focused

**URL:** <https://forum.bubble.io/t/input-style-when-focused/7812>\
**Category:** Need help\
**Created:** [November 12, 2016, 1:28pm UTC](https://forum.bubble.io/t/input-style-when-focused/7812 "2016-11-12T13:28:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jogo88](https://avatars.discourse-cdn.com/v4/letter/j/54ee81/32.png) [@jogo88](https://forum.bubble.io/u/jogo88)\
**Post date:** [November 12, 2016, 1:28pm UTC](https://forum.bubble.io/t/input-style-when-focused/7812/1 "2016-11-12T13:28:56Z")

</div>

Hi,

I’m making a an input style where when the input is focused, the placeholder greys out, becomes smaller and moves to the top of the space where the user types the data (still in the same input box) and is still displayed. Right now, I can only find grey out. How do I do the other 2 options?

Thanks.

---

<div class="post-metadata">

**Author:** ![romanmg](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/romanmg/32/237672_2.png) [@romanmg](https://forum.bubble.io/u/romanmg)\
**Post date:** [November 12, 2016, 3:08pm UTC](https://forum.bubble.io/t/input-style-when-focused/7812/2 "2016-11-12T15:08:29Z")

</div>

Hey @jogo88,

I’ve done this before with an app and you’ll need to use a text element that is hidden until the input is focused. When focused, it’s visible, already small, and you can animate it in so it looks like it moves.

* * *

Gaby | [Coaching Bubble](http://coachingbubble.com)

---

<div class="post-metadata">

**Author:** ![jogo88](https://avatars.discourse-cdn.com/v4/letter/j/54ee81/32.png) [@jogo88](https://forum.bubble.io/u/jogo88)\
**Post date:** [November 12, 2016, 10:46pm UTC](https://forum.bubble.io/t/input-style-when-focused/7812/3 "2016-11-12T22:46:05Z")

</div>

Got it. Thanks so much!

---

<div class="post-metadata">

**Author:** ![supernaturally](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/supernaturally/32/8307_2.png) [@supernaturally](https://forum.bubble.io/u/supernaturally)\
**Post date:** [November 13, 2016, 3:32am UTC](https://forum.bubble.io/t/input-style-when-focused/7812/4 "2016-11-13T03:32:34Z")

</div>

Does anyone have a live example they’d be willing to post? This sounds like very intriguing UX.

---

<div class="post-metadata">

**Author:** ![romanmg](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/romanmg/32/237672_2.png) [@romanmg](https://forum.bubble.io/u/romanmg)\
**Post date:** [November 13, 2016, 3:49am UTC](https://forum.bubble.io/t/input-style-when-focused/7812/5 "2016-11-13T03:49:51Z")

</div>

Something like this:

> **[Bubble - Visual Programming](https://forumapp3.bubbleapps.io/version-test/field_label_animation)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

  
bubble.is/page?type=page&name=field\_label\_animation&id=forumapp3&tab=tabs-2

---

<div class="post-metadata">

**Author:** ![supernaturally](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/supernaturally/32/8307_2.png) [@supernaturally](https://forum.bubble.io/u/supernaturally)\
**Post date:** [November 13, 2016, 3:53am UTC](https://forum.bubble.io/t/input-style-when-focused/7812/6 "2016-11-13T03:53:54Z")

</div>

Wow! This is excellent, thanks for sharing. Would it be possible to see a screenshot of the workflow?

---

<div class="post-metadata">

**Author:** ![romanmg](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/romanmg/32/237672_2.png) [@romanmg](https://forum.bubble.io/u/romanmg)\
**Post date:** [November 13, 2016, 3:56am UTC](https://forum.bubble.io/t/input-style-when-focused/7812/7 "2016-11-13T03:56:42Z")

</div>

I edited the link up there to reveal the editor link. For whatever reason, linking to the forum app generates that big box generic thing.

---

<div class="post-metadata">

**Author:** ![Guru](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/guru/32/28299_2.png) [@Guru](https://forum.bubble.io/u/Guru)\
**Post date:** [August 9, 2017, 8:55pm UTC](https://forum.bubble.io/t/input-style-when-focused/7812/8 "2017-08-09T20:55:00Z")

</div>

I have one more question regarding this. Is it possible to somehow set this up as a reusable element with dynamic text that would be equal to input’s placeholder?

That would be useful if you have to manage quite a lot of them.
