Question

I’ve been trying to apply some custom style to my ListBoxes but the styles are not applying the following is the CSS

.gwt-ListBox{
 background: #fff;
 border: 1px solid #96CAEA;
}

I’ve inspected my code in IE and what i understad is instead of solid it is picking inset from Standard.css, I also tried using new css class like

.listBox{
 background: #fff;
 border: 1px solid #96CAEA;
} 

and this also giving same result what’s wrong in my approach,
Thanks,

Answer 1

GWT has concept of themes.

If you have inherited a Theme it will override your styles. Use firebug to find computed styles, stylesheets downloaded and styles applied. Once you see firebugs information it would be easy to fix it.

If would be easier to use clean theme in GWT if you need to do a lot of customization.

If you are using standard theme and are stuck with it. You would need to use !important tag in your .listbox stylename

.listBox{
 background: #fff;
 border: 1px solid #96CAEA !important;
}

The use of !important is considered a bit un-tidy or hackey approach 🙂