-1

I have this HTML page:

HTML Page

What I want to do is, remove that black border around my text input. But since my 'things to do' list is created dynamically (it's empty when the page loads), I want to remove the border using my JavaScript file.

How shall I do it?

FluffyKitten
  • 13,824
  • 10
  • 39
  • 52
Dhruv Erry
  • 161
  • 3
  • 8
  • 4
    Dynamic or not you should be able to remove the focus glow with pure css. Like `input { outline: none; }` – Carsten Løvbo Andersen Sep 17 '20 at 06:26
  • 2
    use `outline:none` – نور Sep 17 '20 at 06:27
  • yes, you can add style attribute or using class – Ahfa Sep 17 '20 at 06:28
  • Yeah damn, didn't know the .css file could style future elements! Thanks – Dhruv Erry Sep 17 '20 at 06:29
  • 1
    But I have to caution doing this! Focus is *very important* for accessibility and trying to navigate a web page using a keyboard instead of a mouse. If you don't know what element has focus, you have no idea what is going to happen when you press a key or hit enter!! – FluffyKitten Sep 17 '20 at 06:31
  • 1
    Does this answer your question? [How to remove focus around buttons on click](https://stackoverflow.com/questions/19053181/how-to-remove-focus-around-buttons-on-click) – Always Helping Sep 17 '20 at 06:35
  • @FluffyKitten I see the potential risk, but is the cursor blinking (and the user typing there) not enough? – Dhruv Erry Sep 17 '20 at 06:37
  • Maybe an idea is to create the CSS rule about it and toggle the class dynamically when you click the button. Doing so you are in control of how to display, how long to display it, color etc – JohnRambo Sep 17 '20 at 06:37
  • Thanks I got it guys, I just did it in the .css file – Dhruv Erry Sep 17 '20 at 06:38
  • 2
    @DhruvErry "*is the cursor blinking (and the user typing there) not enough?*" Not if they can't see it :) Accessibility and keyboard navigation is crucial for the blind and partially sighted. – FluffyKitten Sep 17 '20 at 06:38
  • The ridiculously hideously ugly thick black border was added in chrome 83. It's ugly. There's currently still no reliable way to style it in all cases. See https://bugs.chromium.org/p/chromium/issues/detail?id=1084974 – freedomn-m Sep 17 '20 at 06:52

2 Answers2

1

You may try using document.getElementById("input'sID").style.outline = "none"; or document.querySelector("input").style.outline="none"; this will set the outline property of input box containing a specific id to none through javascript. or it won't effect even if the input types render dynamically, you may set input{ outline: none} in css and it will work for all input types rendered dynamicaaly on your page.

Ritika Gupta
  • 376
  • 1
  • 16
0

When you create this input field, just make sure the autofocus attribute is set to false or just don't add it.

you can also cancel it (even though the defult is false) like this:

document.getElementById("id_Of_The_Element").autofocus = false;
php123
  • 139
  • 9