styling :focus

  • Hi,

    in some browsers I noticed that “Add outline to elements on keyboard focus Outline color” leads to a link being outlined when clicked with mouse not just when [tab] is being used. I would like to get rid of that (just the action when mouse is used), but somehow I seem to be unable to change the style. I tried to restyle below by using outline: 0 or changing the color to white to it would no show up but had no luck.
    :focus {
    outline: 1px solid #5F9EA0!important;
    }

    How can I achieve this? Thank u!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Joe Dolson

    (@joedolson)

    This is correct behavior. If a link retains focus after being clicked, then it will have the focus styles. :focus doesn’t relate to using the tab key; it relates to whether the program has placed focus on a particular elements – using the tab key is a way to move focus between elements, but it is not the *only* way to do that.

    Thread Starter jana11

    (@jana11)

    Ok, thank you. Is there a way to style it so that the outline border does not sit right on the link words (left and right)? It does not look very good the way it is.
    Thanks again!

    Plugin Author Joe Dolson

    (@joedolson)

    Can you point me to a specific example?

    Thread Starter jana11

    (@jana11)

    I was trying to attach a screenshot but, unfortunately, this is not possible. It would make it easier to explain.
    If someone views the website with Firefox or Google Chrome they will see the :focus border around the link in a way that on top and left and right the border sits right next along the menu item. I would like to have somewhat off a padding between menu item and border. How can I achieve this?

    Thanks!

    Plugin Author Joe Dolson

    (@joedolson)

    Well, that has to do with the CSS used to create the menu. What WP Accessibility does is outline the focusable element (the <a href=''> element). The exact shape of that element, however, is dictated by the theme. Themes that don’t use a :focus style frequently are not attentive to the shape of the focusable object, since :hover styles can be attached to elements that are not focusable.

    There’s little I can do about that; you’d have to modify the theme.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘styling :focus’ is closed to new replies.