Is it possible to style tabindex using CSS

Hi,

I have a navigation bar which is assigned a tabindex value, so that it is possible to navigate through it using the keyboard.

<div id="Accordion1" class="Accordion" tabindex="0">

Anyway, in Firefox and IE, all is good. However, Chrome and Safari respectively but a big green or blue border around the whole navigation bar (owing to the tab index).
Question: is there any way to change this behaviour using CSS?
I have searched Google and other forums and it seems like the answer is a resounding “no!”, but nonetheless someone here might have a clever idea that will help.

It’s caled an outline :).

outline:0;

I have to go, I’m late for work. Hope that helped :slight_smile:

Ryan,
You are a star. Thank you very much!!!
Have fun at work.

I didn’t :). I never do.

Glad it worked :).

I’d always be very careful about removing the outline, and only do that if you have an alternative :focus style that highlights the selected menu item - otherwise it makes it difficult for people using the keyboard to know where they are.

…And I would be very wary of introducing tabindex at all.

I have a navigation bar which is assigned a tabindex value, so that it is possible to navigate through it using the keyboard.

Focussable elements are already able to be accessed via the keyboard, naturally in source order (except in Opera where you can choose a spatial direction and are not limited to source order).

Tabindex is really for when your source order is unavoidably weeeeeird and you’d like the keyboarding users’ experience to make sense. Otherwise, try NOT to use it. It can seriously screw with a keyboarder’s ability to navigate where they want to on your page.

As a note, I notice the div is called “Accordion”… using a javascript toggle to hide/show page elements, I noticed that Opera allows me to focus onto the stuff that appears on screen, while FF and Safari make me tab through all the elements in source order, even though they have been pulled offscreen (they are not display: none but absolutely positioned). I could imagine carfefully adding tabindex dynamically to help “fix” those browsers, but every time someone triggered the toggle, the tabindexes would have to adjust.
I’d be too scared to try it on a real page.