Title: styling :focus
Last modified: August 23, 2018

---

# styling :focus

 *  [jana11](https://wordpress.org/support/users/jana11/)
 * (@jana11)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fstyling-focus%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Joe Dolson](https://wordpress.org/support/users/joedolson/)
 * (@joedolson)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/styling-focus/#post-10619739)
 * 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](https://wordpress.org/support/users/jana11/)
 * (@jana11)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/styling-focus/#post-10621204)
 * 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](https://wordpress.org/support/users/joedolson/)
 * (@joedolson)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/styling-focus/#post-10622799)
 * Can you point me to a specific example?
 *  Thread Starter [jana11](https://wordpress.org/support/users/jana11/)
 * (@jana11)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/styling-focus/#post-10622815)
 * 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](https://wordpress.org/support/users/joedolson/)
 * (@joedolson)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/styling-focus/#post-10629272)
 * 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.

 * ![](https://ps.w.org/wp-accessibility/assets/icon-256x256.png?rev=1097582)
 * [WP Accessibility](https://wordpress.org/plugins/wp-accessibility/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-accessibility/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-accessibility/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-accessibility/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-accessibility/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-accessibility/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [Joe Dolson](https://wordpress.org/support/users/joedolson/)
 * Last activity: [7 years, 7 months ago](https://wordpress.org/support/topic/styling-focus/#post-10629272)
 * Status: not resolved