Question

I am new to GWT/uiBinder (latest version of GWT and testing under latest Eclipse) and really puzzled. My CSS for buttons is …

/* --button-- */
.gwt-Button {
    font-size: 16px;
    font-weight: normal;
    color: #0F0;
    background: #F00;    /* this gets ignored */
}

The background does nothing, the rest works.

I have tested that this CSS entry does something by changing the color and seeing that it works. I have also tried “background-color” (I have seen both in various docs). The background never changes.

I also tested a gwt-TextBox as follows and it works just fine.

/* --text box-- */
.gwt-TextBox {
    font-size: 16px;
    font-weight: normal;
    color: #0F0;
    background: Beige;
}

Note: I know that sometimes while testing you have to refresh the web page to see your changes.

Note: I can set the button background by using a CSS entry called “myButton” and using styleName=’myButton’ it in the uiBinder entry.

Note: The button is in a Layer in a LayoutPanel in a north:DockLayoutPanel in an east:DockLayoutPanel.

Help!

Answer 1

https://stackoverflow.com/a/7833358/635411

You can use a more specific selector like the other answer suggests:

/* --button-- */
button.gwt-Button {
    font-size: 16px;
    font-weight: normal;
    color: #0F0;
    background: #F00;
}

Personally, I try to avoid overwriting the default styles because of the precedence issues.