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

p5.js Beginners
1

So I have an input stored as a variable.

let input = createInput();

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

I know that can be done in css with

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

1 Like
2

p5js.org/reference/#/p5.Element/attribute

3

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.

input.attribute('outline', 'none');
4

Seems like the outer attribute is focus, while outline is its inner attribute. :thinking:

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

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

5

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

6

Oh, forgot about style(): p5js.org/reference/#/p5.Element/style :sneezing_face:

And if that fails, we can still access the underlying HTMLElement via elt: :money_mouth_face:
p5js.org/reference/#/p5.Element/elt

1 Like
7

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

anyway the solution wasn’t very hard

<style>
	input:focus {
		outline: none;
	}
</style>
2 Likes