How can I build a CSS selector that will highlight/outline a focused tab, while not effecting other non-tab widgets?


Tags: css,jquery-ui,css-selectors

Problem :

PROBLEM:

The user is able to utilize the "tab" key to navigate thru the page and land on the "tabs" panel. However, when they initially land on the "tabs" panel - there is no visual indication (outline/highlight/etc) that they are there.

-As a result, they think their tab key (or the tab panel) is not working correctly.

Notes:

My suspicion is that this new behavior is due to a CSS change that occurred when upgrading from 1.8.x to 1.10.x - But, of course, I'm not sure.

I've tried various css entries to cause the focused tab to visually outline/highlight...-So far, one that appears to have a visual effect on the tab is this selector:

    .ui-widget :focus     
    { 
        border-style: inset !important;
        border-width: 5px !important;
    }

...But, this selector is too broad and impacts other widgets on the page that are outside of the tabs() DIV. --I only want to "highlight" focused tabs within the "tabs" DIV.

Question:

How can I build a CSS selector that will highlight/outline a focused tab, while not effecting other non-tab widgets?

(Thanks for your help)

jquery script

    $(document).ready(function() {
        $('#tabdiv').tabs();  //<== tabs
        $( "input[type=submit], a, button" ).button().click(function( event ) {event.preventDefault();});        
        $( "#datepicker" ).datepicker();
    });

css

    .ui-widget :focus 
    { 
        border-style: inset !important;
        border-width: 3px !important;
    }   

HTML snippet

    <div>
        <h1>body-A</h1>
        <div id="tabdiv">
            <ul>
                <li><a href="#tabA">TabA</a></li>            
                <li><a href="#tabB">TabB</a></li>
                <li><a href="#tabC">TabC</a></li>
                <li><a href="#tabD">TabD</a></li>
            </ul>
            <div id="tabA">
                <div>
                    <span>tabA stuff</span>
                </div>
            </div>
            <div id="tabB">
                <div>
                    <span>tabB stuff</span>
                </div>
            </div>      
            <div id="tabC">
                <div>
                    <span>tabC stuff</span>
                </div>
            </div>
            <div id="tabD">
                <div>            
                    <span>tabD stuff</span>
                </div>
            </div>
        </div>
        <div>
            <p>Date: <input type="text" id="datepicker" /></p>

            <button>A button element</button> 
            <input type="submit" value="A submit button" /> 
            <a href="#">An anchor</a>        
        </div>
    </div>          


Solution :

It appears that to following works...

    .ui-widget#tabdiv :focus 
    { 
        border-style: inset !important;
        border-width: 3px !important;
    } 

Thanks!


    CSS Howto..

    How to disable [marquee] tag with CSS? Is this possible?

    How do I make circles within a larger circle, and text within the center of all the circles, in CSS?

    How to Vertical align text in div

    How can I create an addin in Visual Studio to generate javascript, CSS and other code from a settings file

    How to create dropdown navigationbar without float?

    Always show hover text in an appropriate position

    .addClass - How to call CSS from linked css?

    How do I select this Div with CSS

    how do i place text opposite to Anchor Tag Using CSS [closed]

    How to display block from left to right in css

    CSS styles “leaking” to non-intended elements, why does it happen and how to prevent it?

    How to change the link color of the current page with CSS

    How to set a minimum content size of a webpage in html, css? [closed]

    Codeigniter: how to access css files from different views?

    How to align stacked Font-Awesome icons correctly

    Rails 3 - will_paginate plugin - how to style it

    How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?

    how to position an element on top of another element?

    how to create an anchor point

    How could I use pseudo-element :after :before conditionally

    How to use images for check boxes using CSS or may be Javascript?

    How can I get a label to right align in a table “cell” (td)?

    How to show one Div when the user hovers over another on Tumblr?

    How does a browser determine which cursor to use if multiple are set via CSS?

    How to capture hover events on css (less) box-shadow

    How to place 3 different paragraphs next to each other?

    how to bold words within a paragraph in HTML/CSS?

    How to shorten this placeholder-transitioning CSS selector using sass/compass?

    How to contain text box in parent div

    How to make letters in SVG to be animatable individually?