Override user agent (Chrome) default styles inside GWT

Question

i've a TabBar that after the last Chrome upgrade (32.0.1700.76 m) is displayed with an outline on focused tabs: outlined tab

In past version there wasn't. To restore old view i tried to set some outline in CSS, like this:

.gwt-TabBar .gwt-TabBarItem:focus {
outline: lime auto 5px !important;
}

(lime is just for see if it works).

Even this edit, the computed style still remains the default (-webkit-focus-ring-color auto 5px;):

What should i do to override this user agent style?

EDIT

I think the blue outline is not of the HTML (div):

label outline

label code

label modifier

label outline css

The one i want to put away is on the TabBar Item object:

tabbatitem outline

tabbatitem code

tabbaritem modifier

tabbaritem outline css

I honestly don't know why the Churro solution worked before :(

Churro Churro · Accepted Answer · 2014-01-20T23:03:20

I tried the following CSS to highlight the textarea on this Stackoverflow page, and it worked:

.wmd-input:focus {
    outline: lime auto 5px !important;
}

Make sure your selector in front of :focus is correct.

EDIT

I took a look at a TabPanel in my own GWT app. The element that gets a blue ring around it in a TabBarItem is the Label (div) containing the tab's text, not the gwt-TabBarItem.

Try this selector: .gwt-TabBar .gwt-TabBarItem-selected .gwt-Label:focus

Override user agent (Chrome) default styles inside GWT

1 Answers