Remove input:focus defaults with JS

Code Help HTML/CSS/JS
1

Selecting an input element changes the border. How do I stop this with pure JS?

2

To change the input style in javascript, add an event listener to the input element:

document.getElementById("YOUR_INPUT_ID").addEventListener('focus', function() {
    // as an example, i have set the background to red
    document.getElementById("YOUR_INPUT_ID").style.backgroundColor = "red";
});
3 Likes
3

So I put

element.style.border = "";

To not have the orange focus border

1 Like
4

put element.style.borderStyle = 'none';, an empty string won’t work.

2 Likes
5

You can set the outline to “none”

element.style.outline = "none";

I hope that helps :grin:

4 Likes
6

Is there a special reason it has to be in js? Css can do it too.

2 Likes
7

This is actually the solution, the default orange outline on input is outline not border

8

Yes, there is a special reason. I’m making a library.

2 Likes
9

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