Menu icon Foundation
Active tabs border

Hi, guys.

Anyone knows how to get rid of blue border when one clicks on tabs buttons (screenshot from http://foundation.zurb.com/docs/components/tabs.html below)?

Screen shot 2014 08 28 at 12.51.29 pm

I tried to find #008CBA in all my .css files, to no avail. Also not in foundation.tab.js. I haven't altered original css for tabs, here is my default links css:

/* Default Link Styles */
a {
  color: white;
  text-decoration: none;
  line-height: inherit; }
  a:hover, a:focus {
    color: #dbdbdb; }
  a img {
    border: none; }
            

         

Thank you for your help.

tabsborderActive link

Hi, guys.

Anyone knows how to get rid of blue border when one clicks on tabs buttons (screenshot from http://foundation.zurb.com/docs/components/tabs.html below)?

Screen shot 2014 08 28 at 12.51.29 pm

I tried to find #008CBA in all my .css files, to no avail. Also not in foundation.tab.js. I haven't altered original css for tabs, here is my default links css:

/* Default Link Styles */
a {
  color: white;
  text-decoration: none;
  line-height: inherit; }
  a:hover, a:focus {
    color: #dbdbdb; }
  a img {
    border: none; }
            

         

Thank you for your help.

Joel Kinzel about 5 years ago

This is actually a Chrome thing. FireFox does not have this. I'm guessing it is related to accessibility, so I would discourage you from changing it, but if you must:

.tabs dd > a, .tabs .tab-title > a{
    outline: none;
}

David Krmpotic almost 5 years ago

Foundation v5.1.1 (and posibly newer) didn't have this blue outline in Chrome and Safari!

I now see that v5.4.5.0 has them! Is this a feature or just a fail?

Dana over 1 year ago

The glowing blue border/outline is good to keep for accessibility reasons.