# How can I change the properties of a elements :focus in p5?

**URL:** <https://discourse.processing.org/t/how-can-i-change-the-properties-of-a-elements-focus-in-p5/3208>\
**Category:** Beginners\
**Created:** [September 2, 2018, 10:28pm UTC](https://discourse.processing.org/t/how-can-i-change-the-properties-of-a-elements-focus-in-p5/3208 "2018-09-02T22:28:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kiko](https://avatars.discourse-cdn.com/v4/letter/k/5f8ce5/32.png) [@kiko](https://discourse.processing.org/u/kiko)\
**Post date:** [September 2, 2018, 10:28pm UTC](https://discourse.processing.org/t/how-can-i-change-the-properties-of-a-elements-focus-in-p5/3208/1 "2018-09-02T22:28:15Z")

</div>

So I have an input stored as a variable.

```auto
let input = createInput();

```

Now, I want to remove the border that is created when you click on it.

![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/955209efe665c0fa0702f0408bf443fe637470e0.png)

I know that can be done in css with

```auto
input:focus{
   outline:none;
}

```

So how can I change the outline property all in js? For now, I will just make a proper html/css object, that’s not what I’m looking for… Thanks

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 2, 2018, 11:34pm UTC](https://discourse.processing.org/t/how-can-i-change-the-properties-of-a-elements-focus-in-p5/3208/2 "2018-09-02T23:34:48Z")

</div>

[p5js.org/reference/#/p5.Element/attribute](http://p5js.org/reference/#/p5.Element/attribute)

---

<div class="post-metadata">

**Author:** ![kiko](https://avatars.discourse-cdn.com/v4/letter/k/5f8ce5/32.png) [@kiko](https://discourse.processing.org/u/kiko)\
**Post date:** [September 2, 2018, 11:42pm UTC](https://discourse.processing.org/t/how-can-i-change-the-properties-of-a-elements-focus-in-p5/3208/3 "2018-09-02T23:42:12Z")

</div>

That did not work, at least how I tried it. I am trying to set a property to the input:focus.

This is what I did.

```auto
input.attribute('outline', 'none');

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 2, 2018, 11:50pm UTC](https://discourse.processing.org/t/how-can-i-change-the-properties-of-a-elements-focus-in-p5/3208/4 "2018-09-02T23:50:32Z")

</div>

Seems like the outer attribute is _focus_, while _outline_ is its inner attribute. 🤔

Dunno how to handle nested attribs. Maybe this might work. Worth a try: 🥴

`input.attribute('focus', 'outline:none');` or `input.attribute('focus', '{ outline:none; }');`

---

<div class="post-metadata">

**Author:** ![kiko](https://avatars.discourse-cdn.com/v4/letter/k/5f8ce5/32.png) [@kiko](https://discourse.processing.org/u/kiko)\
**Post date:** [September 3, 2018, 12:09am UTC](https://discourse.processing.org/t/how-can-i-change-the-properties-of-a-elements-focus-in-p5/3208/5 "2018-09-03T00:09:14Z")

</div>

No, neither of those worked but thanks for the ideas!😌

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 3, 2018, 12:14am UTC](https://discourse.processing.org/t/how-can-i-change-the-properties-of-a-elements-focus-in-p5/3208/6 "2018-09-03T00:14:00Z")

</div>

Oh, forgot about **style()**: [p5js.org/reference/#/p5.Element/style](http://p5js.org/reference/#/p5.Element/style) 🤧

And if that fails, we can still access the underlying HTMLElement via _elt_: 🤑  
[p5js.org/reference/#/p5.Element/elt](http://p5js.org/reference/#/p5.Element/elt)

---

<div class="post-metadata">

**Author:** ![kiko](https://avatars.discourse-cdn.com/v4/letter/k/5f8ce5/32.png) [@kiko](https://discourse.processing.org/u/kiko)\
**Post date:** [September 3, 2018, 12:56am UTC](https://discourse.processing.org/t/how-can-i-change-the-properties-of-a-elements-focus-in-p5/3208/7 "2018-09-03T00:56:51Z")

</div>

Nope… wondering if this is even a thing in p5.

anyway the solution wasn’t very hard

```auto
<style>
	input:focus {
		outline: none;
	}
</style>

```