GWT按钮蓝色边框行为

Question

Does anybody can tell me where that blue border that appears after you push a PushButton comes from?

I really want to override that behaviour, don't know where or how though

UPDATE:

the effect I'm talking about turns out to be blue on Safari, it goes orange on Chrome and no effect on Mozilla

it occurs when the button has been pressed once, best way to explain it is the http://gwt.google.com/samples/Showcase/Showcase.html#!CwCustomButton

Answer 1

This behavior should be defined in the appropriate stylesheet. If you check GWT sources that would be in /trunk/user/src/com/google/gwt/user/theme/standard/public/gwt/standard/standard.css. It's also defined in other themes.

What you should do is define your own styles

.my-PushButton
{
    border                      :   1px solid #666;
    padding                     :   0 10px;
}
.my-PushButton-down-hovering
{
    background-color            :   #aaf;
}
.my-PushButton-up-hovering
{
    background-color            :   #afa;
}

And then

PushButton btn = new PushButton(...);
widget.setStylePrimaryName("my-PushButton");

Hope this helps.

Answer 2

Are you talking about the "focus ring" that appear around any element when it's focused?

You can tweak it using the outline set of CSS properties: http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines But please note that it's bad practice (re. accessibility) to completely remove it, as you'd remove any indication of whether the button is focused or not, and incidentally, which element is focused, if any.