CODEWITHSUNDEEP
jquerycssjquery-ui
user2443834
user2443834

Reputation: 3

jQuery UI Tab Outline Removal

I was looking for an updated and more specific answer to this question.

In this page, when you click one of the tabs it has the blue outline: http://jqueryui.com/tabs/

How do you remove that and what file is it located in? I am currently using DreamWeaver CC and it automatically added the jQuery references and stylesheets, the ones included are jquery.ui.core.min.css, jquery.ui.theme.min.css and jquery.ui.tabs.min.css. What class/id am I looking for and in what file to remove the outline?

Upvotes: 0

Views: 942

Answers (1)

Andrew Briggs
Andrew Briggs

Reputation: 1349

After jQuery UI has been initialized on the page, here is the HTML structure of the tabs from Chrome Dev Tools:

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner- all" role="tablist">
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true"><a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Nunc tincidunt</a></li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Proin dolor</a></li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false"><a href="#tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Aenean lacinia</a>    </li>
</ul>

With this CSS the outline does not appear on click, see here: http://jsfiddle.net/GptHr/

.ui-tabs-anchor { outline: none; }

Also, read why using outline:none causes accessibility issues: http://www.outlinenone.com/

Upvotes: 2

Related Questions