How to Change My Gwt Listbox Style

how to change my GWT listbox style

..................................................

Hi now do this over write

   body .gwt-ListBox{
color: green !important;

}

.gwt-ListBox{
color: red !important;

}

Demo

Second is

Define your body id

as like this

html

<body id="someid">
<div class="gwt-ListBox">
some text
</div>

</body>

Css

#someid .gwt-ListBox{
color:green !important;
}

How to change the Size of the ListBox of the datePicker in GWT?

This should do:

.gwt-DatePicker .gwt-ListBox {
    font-size: 200%;
}

Works if I apply it to the GWT Showcase:

Sample Image

Set style to GWT ComboBox items

I believe you can use the .setClassName("my_css_class") to style the SelectElement.

Add the css to your html something like this:

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   }

You will also find a lot of information on styling using css.

If you're using any other GWT widget, ie a ListBox, you can use .setStyleName("my_class_name"). You can wrap a GWT ListBox to a SelectElement too and style it.

ListBox listBox = ListBox.wrap(mySelectElement);
listBox.setStyleName("my_css_class");

See here for more: https://bavotasan.com/2011/style-select-box-using-only-css/

EDIT: Some excellent examples for using css styling drop down boxes here: How to style a <select> dropdown with CSS only without JavaScript?

EDIT 2 Custom styling of a dropdown box

Styling individual items of a ListBox or dropdown box.

CSS:

    .selectbox {
        border: 3px;
        border-radius: 5px;
        padding: 4px;
        background-color: #44f;
    }
    .optioncss {
        background-color: #888;
    }

HTML select item for example

    <select id="selectbox" class="selectbox">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>

GWT client code to re-style items

    ListBox select = ListBox.wrap(RootPanel.get("selectbox").getElement());
    SelectElement elem = (SelectElement)select.getElement().cast();
    elem.getOptions().getItem(0).setDisabled(true);
    elem.getOptions().getItem(1).setClassName("optioncss")

Single GWT Listbox won't accept CSS, but overriding all GWT Listboxes works

Probably a basic specificity issue (your browser dev tools should help you find it); basically you probably have a background-color for .gwt-ListBox that's being defined after (after in the same CSS file, or in a second file loaded after the one that contains: ) the background-color for .requiredField, and because the .gwt-ListBox and .requiredField selectors have the same specificity, the latter one wins.

Solutions:

make sure .requiredField appears/is loaded after .gwt-ListBox
or use a selector that is more specific than .gwt-ListBox, e.g. .gwt-ListBox.requiredField
or use a dependent style name (addStyleDependentName("required") and a .gwt-ListBox-required selector)

Note: !important will work but is bad practice (reasons are rooted in accessibility, and user choice (user-specific stylesheets))

How to Change My Gwt Listbox Style