# Ways to hide the HTML text-input box? Or alternatives?

**URL:** <https://discourse.processing.org/t/ways-to-hide-the-html-text-input-box-or-alternatives/24429>\
**Category:** Coding Questions\
**Created:** [October 8, 2020, 8:27am UTC](https://discourse.processing.org/t/ways-to-hide-the-html-text-input-box-or-alternatives/24429 "2020-10-08T08:27:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![aith](https://avatars.discourse-cdn.com/v4/letter/a/ba9def/32.png) [@aith](https://discourse.processing.org/u/aith)\
**Post date:** [October 8, 2020, 8:27am UTC](https://discourse.processing.org/t/ways-to-hide-the-html-text-input-box-or-alternatives/24429/1 "2020-10-08T08:27:31Z")

</div>

Hi! I’m using p5 to fake a [retro computer terminal](https://cdn.osxdaily.com/wp-content/uploads/2016/06/retro-terminal-mac-screenshots-1-610x419.jpg) for a spooky game. I want the user to be able to type in the terminal, but I find the html text-input box to be visually jarring.

Is there a way to let the user click on a p5 canvas, and then be able to input text? Is it possible to ‘hide’ the visual aspect of the html text box, while also overlapping with the p5 canvas? Or is there another way to input text?

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [October 8, 2020, 9:27am UTC](https://discourse.processing.org/t/ways-to-hide-the-html-text-input-box-or-alternatives/24429/2 "2020-10-08T09:27:49Z")

</div>

Welcome, @aith

You can apply CSS to the input element using the `style()` method. For example, to remove the border and background:

```auto
input = createInput();
input.position(50, 50);
input.style('border', 'none');   
input.style('background', 'transparent'); 

```

You can also use this approach to style the input text. If that doesn’t work for you, then there are other ways to render input text.

---

<div class="post-metadata">

**Author:** ![aith](https://avatars.discourse-cdn.com/v4/letter/a/ba9def/32.png) [@aith](https://discourse.processing.org/u/aith)\
**Post date:** [October 9, 2020, 2:25am UTC](https://discourse.processing.org/t/ways-to-hide-the-html-text-input-box-or-alternatives/24429/3 "2020-10-09T02:25:02Z")

</div>

> [@tabreturn](#):
>
> ```auto
> input = createInput();
> input.position(50, 50);
> input.style('border', 'none');   
> input.style('background', 'transparent'); 
> 
> ```

That works! Is there a way\* to bring that html element in front of a canvas? (sorry: forgot a word!)

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [October 9, 2020, 2:36am UTC](https://discourse.processing.org/t/ways-to-hide-the-html-text-input-box-or-alternatives/24429/4 "2020-10-09T02:36:08Z")

</div>

Sorry. I don’t understand what you mean. The text input appears over any of the shapes I draw (in Firefox).

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [October 9, 2020, 4:22am UTC](https://discourse.processing.org/t/ways-to-hide-the-html-text-input-box-or-alternatives/24429/5 "2020-10-09T04:22:34Z")

</div>

Look into adding a `z-index` property to it’s style. This controls the order it gets rendered.
