Prevent Selection Box

[piradyne]

http://i39.tinypic.com/16jpp44.png

Hi, for some reason in version 2.00, when I click on anything such as the logo and the social icons for example, there is a visible selection thingy now. I don’t remember seeing this before. How can I turn this off. Click on a social icon and the selection is all the way across the top of the header area. Very distracting and annoying.

Thanks

Jarrod

Topic

[Jason Bobich]

Can you provide me a link where I can see the issue on your site out of maintenance mode? And what web browser is your screenshot in?

[piradyne]

here: http://piradyne.com

You know it maybe related to FireFox. I just viewed in IE10 (win 7), and I do not see this problem nor do I see the thing where when the page refreshes it turns white for a moment, then everything renders (in FireFox). Funny though, in IE, my logo does not show up. Sigh. All of this is making me crazy. I currently have 22.0, I see and update coming down, may make a difference.

Jarrod

[Jason Bobich]

All right got it, try putting this in your child theme’s style.css:

.themeblvd-contact-bar li a {
	outline: none;
}

Does that solve the issue?

[piradyne]

Hi, thanks yes, for the social icons, but how can I do this everywhere? When you click on the logo, in side woocommerce, everwhere you can click on something there is that selection box, that I do not remember being there in the prev version. Is there someplace in css where I can turn outline off for all elements?

Thanks

Jarrod

[piradyne]

Hmm… I was just reading here: http://www.outlinenone.com/

That it should be enabled for accessibility. I never thought about that as I always use a mouse. Sigh. What are you thoughts about this?

Thanks

Jarrod

[piradyne]

a, a:visited, a:focus, a:active, a:hover{
outline:0 none !important;
}

This seems to work btw. Do give me your thoughts on accessibility.

Thanks

Jarrod

[Jason Bobich]

I’m not sure why the outline is messed up with the social icons, where it stretches across, so I would say hiding it in this specific case is more preferable. However, in general, a lot of people coming into web design fresh tend to not like the outline property not fully understanding what it is.

Realistically, this does not impact design very much, as it only happens when you click something. But in terms of accessibility, it is natural thing to have and why web browsers are setup with this by default. For example, someone that is navigating your site that doesn’t have use of a mouse for whatever reason might have some software where they’re moving through the links (or pressing tab on the keyboard) — this allows them to know what they’re selecting.

Additionally for accessibility, many places in the framework’s CSS where we’re styling the :hover pseudo class, we also style the the :focus pseudo class, as well. This allows whatever hover effects we’re giving normal users (i.e. a button lighting up or something) to happen with someone using one of the screen reader applications tabbing through links, as well.

[Author]

Replies