0

When an element like a dropdown menu or link is clicked, Firefox shows a dotted outline. I see that it acts as an important visual indicator for keyboard-based navigation (among others), but in my case (a news website), there are so many links in the navbar that it'd make keyboard navigation, TAB, TAB, TAB ..., quite painful and unrealistic (i.e. why'd anyone want to press a key that many times when they can simply use a mouse instead?) and so, I want to remove it.

EDIT: As for accessibility... since I am using something like ELEMENT:focus { border: 2px solid #359; } for menus, text-decoration: underline; for links, etc. my website is accessible via keyboard as well. For example, it looks like this upon pressing tabs multiple times (call it an unintended side effect!):

Keyboard accessibility - visual indicator

Upon searching, I found out a simple way to remove the outline:

:focus {
  outline: 0 !important;
}

::-moz-focus-inner {
  border: 0 !important;
}

EDIT: This is added at the top of the stylesheet that's loaded right after Twitter Bootstrap CSS.

I needed to use the !important declaration as the cascading didn't work, i.e. I tried this and it didn't work:

*:focus {
  outline: 0;
}

*::-moz-focus-inner {
  border: 0;
}

Is there a way to accomplish what I am after through cascading and not having to use !important or defining specific elements (e.g. a:focus, button:focus...)?

If the answer is no, is there a specific set of elements that Firefox does this to? If so, what are they? (<a> for sure.)

Community
  • 1
  • 1
its_me
  • 10,998
  • 25
  • 82
  • 130
  • 2
    *i.e. why'd anyone want to press a key that many times when they can simply use a mouse instead?* ... simple: some people have physical disabilities that prevent them from using a mouse. It's called **Accessibility**, and it's an important topic to be aware of for web developers. (hint: some countries/states have legal requirements for website accessibility) – Spudley Oct 31 '13 at 14:54
  • @Spudley Okay, thanks for the heads up. My site does have clear visual indicators to make it accessible via keyboard as well (it's just that I initially *felt* that it's not realistic to use keyboard). I've edited my question to reflect the same. Please take a look. – its_me Oct 31 '13 at 15:04
  • I believe !important is in the bootstrap file, so remove them and your code should work if it is included after the bootstrap css – Adam Oct 31 '13 at 15:12
  • @Adam As I see it that's not the case. – its_me Oct 31 '13 at 15:40

0 Answers0