Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove selecting button with Tab-Key on keyboard

Tags:

html

css

Is there a way to remove the selection with the Tab-Key on the Keyboard. When you're on a website and there are multiple Buttons and you press the Tab-Key it's selecting a button and adds a outline and when you press enter then it's triggering the button. Is there a way to remove this function on a website. I tried it with outline: 0; for * but it's just making the selected outline invisible.

Here's an example:

<button>First Button</button>
<button>Second Button</button>
<button>Third Button</button>

When you press the Tab-Key then you can see this:

When you add outline: 0; to * then the selected Button Outline is invisible but it's still there:

* {
  outline: 0;
}
<button>First Button</button>
<button>Second Button</button>
<button>Third Button</button>

All of this was tested in Firefox Version 92.0

like image 880
GucciBananaKing99 Avatar asked Sep 21 '21 13:09

GucciBananaKing99


1 Answers

You might be able to use a negative tabindex, however that is only supported on HTML5.

* {
  outline: 1;
}
<button>First Button</button>
<button tabindex="-1">Second Button</button>
<button>Third Button</button>
like image 140
Sadly Full Stack Avatar answered Oct 16 '22 07:10

Sadly Full Stack