Set style to GWT ListBox items

问题

Is there a way to apply css style to GWT ListBox drop-down menu (ex: change color of some items) I can't do it by setting a style to whole ListBox because i wanna different style for each item! Result will be like that:

<select class="style1" id="test">
  <option class="style2" value="">&nbsp;</option>
  <option class="style2" value="AL">Alabama</option>
  <option class="style6" value="AK">Alaska</option>
  <option class="style6" value="AZ" class="red">Arizona</option>
  <option class="style6" value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
  <option value="DE">Delaware</option>
 </select>

回答1:

Try with options.getItem(i).getStyle().setColor("#FF0000");

ListBox listBox = new ListBox();
//Add item to listBox.
SelectElement selectElement = SelectElement.as(listBox.getElement());
NodeList<OptionElement> options = selectElement.getOptions();

for (int i = 0; i < options.getLength(); i++) {
     options.getItem(i).getStyle().setColor("#FF0000");
}

回答2:

At some point, I had researched this exact same question. I could not find a way to style ListBox elements, only the overall list.

In my research, I recall seeing other GWT-based libaries with more sophisticated widgets that had this embedded capability (e.g., GXT or Sencha if I recall correctly).

From a raw GWT perspective, I believe one way to go would be to use CellList.

回答3:

Even I tried this a long time back. I did not find any solutions to make this work with only GWT.

How ever, there are few 3rd party JS frameworks which allows you to do it. You can check out the following links

http://silviomoreto.github.io/bootstrap-select/3/

http://brianreavis.github.io/selectize.js/

回答4:

Just style that badboy with css:

.my_select { stuff for control here } .my_select option { color: #fff; background-color: #000 }

来源：https://stackoverflow.com/questions/20815987/set-style-to-gwt-listbox-items

标签

java

css

gwt

listbox