Remove outline from active jQuery UI tab?

Question

I want to remove the outline on an active jQuery UI tab (or at least change the color).

Working from this example, I tried this unsuccessfully:

<style>
    #tabs .ui-state-focus
    {
        outline: none;
    }
</style>

(based on a tip from this question and answer).

What's the trick to removing the outline from an active tab?

Answer 1

I don't believe it's the class focus that you need to target, it's the CSS psuedo-class :focus

.ui-state-focus:focus { outline:1px dotted red !important }

if that works, go with {outline:none} to remove it. You are sort of jacking up your accessibility by worrying about it though, FYI.